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.
<rdar://problem/80017451>
Tiled layer flashes.
> If you replace the gradient by a simple background:yellow Because color backgrounds fall into a different compositing code path.
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.
That last one is different. I moved it to bug 227733.
Created attachment 433004 [details] Test case Test case shows missing tiles when the animation resets (making it 'alternate' fixes the bug).