Bug 211625 - Child element flashes during some container transform transitions
Summary: Child element flashes during some container transform transitions
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 13
Hardware: Mac macOS 10.15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-05-08 08:39 PDT by ian
Modified: 2020-05-12 09:53 PDT (History)
6 users (show)

See Also:


Attachments
Simplified example; Reproduce by repeatedly mashing keys 1,2,3 in very quick succession for a few moments. (2.04 KB, text/html)
2020-05-08 08:39 PDT, ian
no flags Details
Visual example of issue (533.80 KB, image/gif)
2020-05-12 06:41 PDT, ian
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description ian 2020-05-08 08:39:47 PDT
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.
Comment 1 Alexey Proskuryakov 2020-05-08 15:40:31 PDT
> 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.
Comment 2 Radar WebKit Bug Importer 2020-05-08 15:40:43 PDT
<rdar://problem/63039358>
Comment 3 Antoine Quint 2020-05-11 07:12:22 PDT
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.
Comment 4 Simon Fraser (smfr) 2020-05-11 10:00:14 PDT
There is the occasional flash, which seems like a tiled layer flash.
Comment 5 ian 2020-05-12 06:41:49 PDT
Created attachment 399124 [details]
Visual example of issue
Comment 6 ian 2020-05-12 06:45:31 PDT
(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.