Bug 223784 - Elements with transform are flashing through others during animation
Summary: Elements with transform are flashing through others during animation
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Compositing (show other bugs)
Version: Safari 14
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-03-26 01:36 PDT by Roland Soos
Modified: 2021-04-02 01:37 PDT (History)
5 users (show)

See Also:

Attachments
Safari 14.4.1 iPhone (257.25 KB, image/png)
2021-03-26 01:36 PDT, Roland Soos 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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>