Bug 223784

Summary:

Elements with transform are flashing through others during animation

Product:

WebKit

Reporter:

Roland Soos <roland>

Component:

Compositing

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

bfulgham, graouts, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 14

Hardware:

All

OS:

All

Attachments:

Description	Flags
Safari 14.4.1 iPhone	none

Description Roland Soos 2021-03-26 01:36:11 PDT

Created attachment 424327 [details]
Safari 14.4.1 iPhone

Steps to reproduce:
1. Open https://smartslider3.com/bugs/webkit/transform2dflashing/
2. Switch slides (mousewheel or swipe) and watch the animated elements.

I know Safari handles the z-index between elements with 3d transforms differently than other browsers do. As I remember such issue only happened in the past when real 3d animations were used like rotateX, rotateY, z axis. Now it happens without 3d properties. 

This is how the transform property looks like on one of the flashing elements during the animation:
transform: translate(355px, 442px) translate(-50%, -50%) translate3d(-4.1864px, -10.466px, 0px) scale(0.9791, 0.9791);

Comment 1 Simon Fraser (smfr) 2021-03-26 10:48:32 PDT

I can reproduce the bug in Safari on macOS too.

Comment 2 Radar WebKit Bug Importer 2021-04-02 01:37:14 PDT

<rdar://problem/76142600>