Bug 211625

Summary:

Child element flashes during some container transform transitions

Product:

WebKit

Reporter:

ian

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

dino, graouts, graouts, sabouhallawa, simon.fraser, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 13

Hardware:

Mac

OS:

macOS 10.15

Attachments:

Description	Flags
Simplified example; Reproduce by repeatedly mashing keys 1,2,3 in very quick succession for a few moments.	none
Visual example of issue	none

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.