Demo crashes on iOS when run in iframe

[kevinpschaaf]

Description

Demo crashes on iOS when run in iframe. It would be ideal to understand what triggers the Safari bug and consider ways to mitigate it. In the short term, it might be good to add logic to the demo to pop the demo out of the catalog's demo iframe on iOS, since it reflects poorly on the component, despite it being a Safari bug.

Expected outcome

Demo works.

Actual outcome

Demo crashes Safari.

Steps to reproduce

Open https://elements.polymer-project.org/elements/iron-list?view=demo:demo/index.html&active=iron-list on iOS device

Browsers Affected

• Chrome
• Firefox
• Safari 9
• [?] Safari 8
• [?] Safari 7
• Edge
• IE 11
• IE 10

[blasten]

@kevinpschaaf After testing I came to the conclusion that Safari ran out of heap. It seems like iOS Safari limits the memory size for documents loaded on an iframe. In the main demo (demo/index.html) the content size is 317,298px so when the list sets this.$.items.style.height = '317298px'; it crashes. I commented out that line and set it by myself from the console, then it crashed. Also, some of items have a considerable height in that demo, > 1000px That also crashed the tab since those bitmaps probably go over the GPU memory limit... The easiest fix is to remove the iframe from the catalog either in the demo directly or in the catalog for all the demos. (Many of the app-layout and paper-elements demos don't work correctly because of the iframe, see PolymerElements/iron-component-page#80)