Bug 227576

Summary: Tiled layer flashing during animation
Product: WebKit Reporter: bdc <ben>
Component: CompositingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: graouts, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: Mac (Apple Silicon)   
OS: macOS 11   
Attachments:
Description Flags
Test case
none
Test case none

Description bdc 2021-07-01 02:51:32 PDT
The background of the top bar on the following test page should always stay yellow, yet the black background flashes on every animation iteration:
http://sharedfil.es/M97qw2Khn.html

This bug only happens in Safari (macOS, iOS and iPadOS), and it's apparently caused by the linear gradient. If you replace the gradient by a simple background:yellow, the bug doesn't occur. It's also worth noting the bug only happens when the viewport is fairly large (I don't have an exact number but I'd say > 1000px on macOS, and only in landscape mode on iOS).

I recently stumbled upon similar bugs with different use cases, all of them being caused by a background gradient. Disabling the gradients always fixes the bugs.
Comment 1 Radar WebKit Bug Importer 2021-07-01 04:38:22 PDT
<rdar://problem/80017451>
Comment 2 Simon Fraser (smfr) 2021-07-01 08:37:16 PDT
Tiled layer flashes.
Comment 3 Simon Fraser (smfr) 2021-07-01 11:12:18 PDT
> If you replace the gradient by a simple background:yellow

Because color backgrounds fall into a different compositing code path.
Comment 4 bdc 2021-07-05 07:20:52 PDT
Created attachment 432883 [details]
Test case

Here's another, simplified test case. This seems like a pretty critical bug to me as Safari simply won't animate anything that has a background-image on it.
Comment 5 Simon Fraser (smfr) 2021-07-06 20:49:24 PDT
That last one is different. I moved it to bug 227733.
Comment 6 Simon Fraser (smfr) 2021-07-06 20:53:20 PDT
Created attachment 433004 [details]
Test case

Test case shows missing tiles when the animation resets (making it 'alternate' fixes the bug).