Tiled layer flashing with mouse wheel scrolling

• Component: Compositing
• Status: NEW ---

[Kerry]

Created attachment 432604 [details]
Example test case for background color flashing on fast scrolls

Styling that normally shouldn't be seen from a scrollable (accelerated) element can be visible on a fast scroll. I've isolated this to a small test case, which I've attached to this issue. Folks can also try this out at https://codepen.io/gwwar/pen/BaRawoz

In this test case, the scrollable element has a pink background and a child div that has a white background. If we scroll quickly with a mouse that has a mousewheel, we can see flashes of pink. It should look like the following:
https://user-images.githubusercontent.com/1270189/123994902-af013580-d982-11eb-9cb9-0407bef5df16.mp4

Folks were able to reproduce on both M1 and Intel hardware. The key to reproducing this or not is likely tied to the rate of repaints. I don't see the glitch using the touchpad, but I do with a mouse that has a scroll wheel.

This behavior was originally detected in WordPress Block Editor at https://github.com/WordPress/gutenberg/pull/32747 When added in combination with other bugs, this styling can also bleed through to elements like the scrollbar on the scrollable element. 

https://user-images.githubusercontent.com/1270189/122611446-328f5e00-d036-11eb-8ed1-c30c822add72.mp4

[Simon Fraser (smfr)]

This is tiled layer flashing. Odd that it only happens with scroll wheel mice; I can't reproduce with mine.

[Kerry]

(In reply to Simon Fraser (smfr) from comment #1)
> This is tiled layer flashing. Odd that it only happens with scroll wheel
> mice; I can't reproduce with mine.

This also triggers for me if we add a number of scroll calls in dev console "for ( i =0; i<100000; i++) { document.querySelector('.scrollable').scroll( { top: i } ); }" then trigger a scroll from user input (say touchpad or mouse).

It should look like this:
https://user-images.githubusercontent.com/1270189/123999138-07d2cd00-d987-11eb-8805-0c4fd1a864a3.mp4

[Kerry]

I've isolated the scrollbar behavior in a different test case and filed https://bugs.webkit.org/show_bug.cgi?id=227545 in case there are different reasons for this appearing.

[Radar WebKit Bug Importer]

<rdar://problem/80273176>