Bug 253171

Created attachment 465241 [details] HTML file with the setup to reproduce this bug IMPORTANT: This bug causes a very quick, single flicker of white over the whole screen. Please exercise caution when testing this bug in the case that you have a history of photosensitive seizures. I'm not sure if this can be a possible trigger but I'd rather be cautious. Scrollable containers with contents that overflow their bounds appear to be placed on the GPU. When this happens changing the scroll position of the page, even implicitly, can cause the browser to delay painting the contents of the scrollable container for a few frames. This results in a brief flash of missing content. Note that this *only* happens on iOS — regardless of which browser is using WebKit. It does not happen on macOS at all. This can also happen when elements are forced onto GPU-backed layers, for example by using `transform: translate3d(0, 0, 0);` regardless of whether the element overflows and even when it is not scrollable. I have attached an HTML file that reproduces this behavior: 1. Download the attached file and open it in Safari on iOS. (The simulator and a real device both exhibit the same behavior) 2. Scroll to the bottom of the page 3. Tap the button and see the flicker 4. Tap the second button and see the flicker happen again 5. Repeat as needed The HTML file has some comments regarding the behavior and different ways to reproduce it. The important highlights are: 1. This happens when changing the margin on the document element when overflow is hidden 2. The amount of content that is delayed is larger the further down the viewport is scrolled 3. As mentioned above, a forced layer does not need to overflow to cause this behavior. 4. Non-overflown elements that are NOT GPU-backed do not flicker. 5. An overflowing viewport does NOT cause a flicker.