227576 2021-07-01 02:51:32 -0700 Tiled layer flashing during animation 2021-07-06 20:53:20 -0700 1 1 1 Unclassified WebKit Compositing Safari 14 Mac (Apple Silicon) macOS 11 NEW InRadar P2 Normal --- 1 ben webkit-unassigned graouts simon.fraser webkit-bug-importer oldest_to_newest 1774051 0 ben 2021-07-01 02:51:32 -0700 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. 1774074 1 webkit-bug-importer 2021-07-01 04:38:22 -0700 <rdar://problem/80017451> 1774126 2 simon.fraser 2021-07-01 08:37:16 -0700 Tiled layer flashes. 1774172 3 simon.fraser 2021-07-01 11:12:18 -0700 > If you replace the gradient by a simple background:yellow Because color backgrounds fall into a different compositing code path. 1774803 4 432883 ben 2021-07-05 07:20:52 -0700 Created attachment 432883 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. 1775190 5 simon.fraser 2021-07-06 20:49:24 -0700 That last one is different. I moved it to bug 227733. 1775194 6 433004 simon.fraser 2021-07-06 20:53:20 -0700 Created attachment 433004 Test case Test case shows missing tiles when the animation resets (making it 'alternate' fixes the bug). 432883 2021-07-05 07:20:52 -0700 2021-07-06 20:51:32 -0700 Test case test.html text/html 352 ben PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPG1ldGEgY2hhcnNldD0idXRmLTgiPgo8 bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0iaW5pdGlhbC1zY2FsZT0xLCB3aWR0aD1kZXZp Y2Utd2lkdGgiPgo8dGl0bGU+RXhhbXBsZTwvdGl0bGU+Cgo8c3R5bGU+CiAgQGtleWZyYW1lcyBl eGFtcGxlIHsKICAgIDAlIHsKICAgICAgdHJhbnNmb3JtOiBzY2FsZSgwKTsKICAgIH0KICB9CiAg ZGl2IHsKICAgIGhlaWdodDogMTAwcHg7CiAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQo YmxhY2ssIGJsYWNrKTsKICAgIGFuaW1hdGlvbjogZXhhbXBsZSA1czsKICB9Cjwvc3R5bGU+Cgo8 ZGl2PjwvZGl2Pg== 433004 2021-07-06 20:53:20 -0700 2021-07-06 20:53:20 -0700 Test case animated-bar.html text/html 508 simon.fraser PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPG1ldGEgY2hhcnNldD0idXRmLTgiPgo8 bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0iaW5pdGlhbC1zY2FsZT0xLCB3aWR0aD1kZXZp Y2Utd2lkdGgiPgo8dGl0bGU+VGVzdDwvdGl0bGU+Cgo8c3R5bGU+CiAgQGtleWZyYW1lcyBzbGlk ZSB7CiAgICAwJSB7CiAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUpOwogICAgfQogIH0K ICBib2R5IHsKICAgIG1hcmdpbjogMDsKICB9CiAgI291dGVyIHsKICAgIG92ZXJmbG93OiBoaWRk ZW47CiAgICBiYWNrZ3JvdW5kOiBibGFjazsKICB9CiAgI2lubmVyIHsKICAgIHdpZHRoOiAyMDAl OwogICAgaGVpZ2h0OiAxMDBweDsKICAgIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCh5ZWxs b3csIHllbGxvdyk7CiAgICBhbmltYXRpb246IHNsaWRlIDJzIGluZmluaXRlOwogIH0KPC9zdHls ZT4KCjxkaXYgaWQ9Im91dGVyIj4KICA8ZGl2IGlkPSJpbm5lciI+PC9kaXY+CjwvZGl2Pg==