Bug 223784

Summary: Elements with transform are flashing through others during animation
Product: WebKit Reporter: Roland Soos <roland>
Component: CompositingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, graouts, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: All   
OS: All   
Attachments:
Description Flags
Safari 14.4.1 iPhone none

Roland Soos
Reported 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);
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 attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2021-03-26 10:48:32 PDT
I can reproduce the bug in Safari on macOS too.
Radar WebKit Bug Importer
Comment 2 2021-04-02 01:37:14 PDT
<rdar://problem/76142600>
Note You need to log in before you can comment on or make changes to this bug.