[Webkit-unassigned] [Bug 253171] New: Layers on the GPU can flicker when the page scroll offset is changed programmatically

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=253171

            Bug ID: 253171
           Summary: Layers on the GPU can flicker when the page scroll
                    offset is changed programmatically
           Product: WebKit
           Version: Safari 16
          Hardware: iPhone / iPad
                OS: iOS 16
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Compositing
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: jordan at cryptica.me
                CC: simon.fraser at apple.com

Created attachment 465241

  --> https://bugs.webkit.org/attachment.cgi?id=465241&action=review

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230301/f210ab77/attachment-0001.htm>