Bug 211625 – Child element flashes during some container transform transitions

• Status: NEW
• Component: CSS

Created attachment 398861 [details]
Simplified example; Reproduce by repeatedly mashing keys 1,2,3 in very quick succession for a few moments.

Changes to element's transform (with transition) when start or end of transition includes scales > ~3 may lead to contained elements disappearing for duration of transition. Most often effects child SVGSVGElement, but have encountered it with child imgs. 

Can reliably induce the issue in the attached example after a few moments of repeatedly mashing keys 1,2,3 in very quick succession (not all at once). For a more complex setup in the wild but where the issue appears more consistently, go here: https://sheets.flechs.net/#Mad%20Cat%20Prime , and alternate between pressing "P" and "M" (or "S").

Doesn't reproduce in FF 75 (Mac); though in the same circumstances the transition freezes a moment then picks up towards the end.

Can reproduce in Chrome 81 (on Mac), though it _feels_ like it takes a little more to trigger the issue. 

Testing on a 15-inch 2017 MBP.

Issue also appears in mobile Safari under similar circumstances.

[Alexey Proskuryakov]

> Can reliably induce the issue in the attached example after a few moments of repeatedly mashing keys 1,2,3 in very quick succession (not all at once).

I was able to reproduce getting a blank page for a moment.

[Radar WebKit Bug Importer]

<rdar://problem/63039358>

[Antoine Quint]

I cannot reproduce this with Safari on macOS 10.15.5 with the simplified example and the 1/2/3 keys. I would always see the pink background and some black lines transitioning.

What exact version of Safari and macOS do you see this with? Does this also reproduce with the most recent Safari Technology Preview? Finally, does this reproduce if you toggle Develop > Experimental Features > CSS Animations via Web Animations to be unchecked and reload the page? Don't forget to check it again after trying out.

[Simon Fraser (smfr)]

There is the occasional flash, which seems like a tiled layer flash.

Created attachment 399124 [details]
Visual example of issue

(In reply to Antoine Quint from comment #3)

> What exact version of Safari and macOS do you see this with? 

macOS 10.15.4; 
Safari 13.1 (15609.1.20.111.8)

> Does this also reproduce with the most recent Safari Technology Preview? 

Yes in STP 105 (Safari 13.2, WebKit 15610.1.10)


> Finally, does this reproduce if you toggle Develop > Experimental Features > CSS Animations via Web Animations to be unchecked and reload the page? 

Yes

Attached a gif of the issue. 

I'll test again once I update macOS.