Bug 227532 - Tiled layer flashing with mouse wheel scrolling
Summary: Tiled layer flashing with mouse wheel scrolling
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Compositing (show other bugs)
Version: Safari 14
Hardware: Mac (Intel) macOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-06-30 09:16 PDT by Kerry
Modified: 2021-07-07 09:56 PDT (History)
2 users (show)

See Also:


Attachments
Example test case for background color flashing on fast scrolls (70.20 KB, text/html)
2021-06-30 09:16 PDT, Kerry
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Kerry 2021-06-30 09:16:53 PDT
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
Comment 1 Simon Fraser (smfr) 2021-06-30 09:20:51 PDT
This is tiled layer flashing. Odd that it only happens with scroll wheel mice; I can't reproduce with mine.
Comment 2 Kerry 2021-06-30 09:44:43 PDT
(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
Comment 3 Kerry 2021-06-30 14:34:04 PDT
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.
Comment 4 Radar WebKit Bug Importer 2021-07-07 09:17:15 PDT
<rdar://problem/80273176>