NEW 223784
Elements with transform are flashing through others during animation
https://bugs.webkit.org/show_bug.cgi?id=223784
Summary Elements with transform are flashing through others during animation
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
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
Note You need to log in before you can comment on or make changes to this bug.