Iframe composited layer explosion
Reported by
maciek.k...@gmail.com,
Apr 14 2016
|
|||||
Issue descriptionSteps to reproduce the problem: 1. open Chrome for Android and enable show paint rect 2. visit a page that has an iframe 3. the iframe is on a separate layer, which is heavy for the gpu 4. this problem doesn't occur on desktop (Linux) version of Chrome What is the expected behavior? What went wrong? Iframes in Chrome for Android are given separate composition layer, which is swallowing GPU memory and killing performance. I made a hack that prevents this behavior in certain cases. Did this work before? N/A Chrome version: 49.0.2623.110 Channel: n/a OS Version: Flash Version: Shockwave Flash 21.0 r0 I've got some problems with iframes and composition layers in Chrome for Android. The behavior is completely different on desktop. I use show layers rect from developer tools for debugging. So on desktop, iframes aren't given separate composition layers just like that, but on Android it seems to be default behavior. Each frame has its own composition layer which is a performance disaster. My application relies heavily on iframes and it has a mode in which all iframes are displayed in a grid which can be moved by the user. Performance is terrible when these layers explode. I have completely by chance found a way to prevent this behavior, I thought that something goes wrong when iframe ends up on a separate layer, I didn't realize it was what the browser was doing by default. After 15 hours of analysing this problem I found out about this. Adding scrolling="no" attribute to iframe causes it to NOT be on a separate layer. There are a few exception, where this rules break, these exceptions were problems I was trying to solve. Now I'm mind blown and I have no idea what to do. I can't find any resources that could explain this behavior. I guess it has to do something with document reflow inside iframes, for example this problem won't happen on an empty frame. My question is why on desktop iframes aren't given separate layers, but on Android they do? Is there a genuine way to prevent this behavior on Android? I have prepared a sample, in which you can see how scrolling="no" hack works to make the frame not be on separate layer. This is the sample: http://helium3.comxa.com/js/iframe-test.html Actually scrolling="no" itself, won't do it, but in combination with changing iframe's position, from fixed to relative does that. Here are the steps: 1. Open Chrome for Android 2. Make Chrome show composite layer borders (btw. how can you do that in Chrome for Android v49? It used to be in chrome://flags but no longer appears there, I have to use Chrome 47 just because of that). Notice borders around the frame 3. Click toggle frame button to hide the frame 4. click disable scrolling button to set scrolling="no" attribute 5. click toggle mode button, which changes frame position from fixed to relative 6. notice that now there are no borders around iframe, even after you go back to fixed mode. the frame is not on a separate layer, which is the desired behavior I did it on Chrome 47, I couldn't test it on 49, because I don't know how to enable needed debugging tools there. But my application behaved in the same exact way, had performance drops, so it should work as well on 49. Note that I initially tested it on an iframe with the same origin, the sample is cross origin, but it behaves the same way. Let me know if anything is unclear, English is not my first language. I really hope that I can get an answer here or some pointers. Thank you in advance.
,
Apr 18 2016
,
Apr 18 2016
,
Apr 20 2016
,
May 11 2017
This is a known behavior, we're gradually working on decoupling scrollability from RAM usage to avoid this tradeoff, but as of now this is working as intended. Likely the difference on desktop is you're on a low-dpi monitor, high-dpi desktop monitors will behave similarly to Android. |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by maciek.k...@gmail.com
, Apr 15 2016