[Webkit-unassigned] [Bug 249962] New: Applying CSS transform on SVG group causes its text elements to flicker in Safari
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Fri Dec 30 17:58:41 PST 2022
https://bugs.webkit.org/show_bug.cgi?id=249962
Bug ID: 249962
Summary: Applying CSS transform on SVG group causes its text
elements to flicker in Safari
Product: WebKit
Version: Safari 16
Hardware: All
OS: macOS 13
Status: NEW
Severity: Major
Priority: P2
Component: Animations
Assignee: webkit-unassigned at lists.webkit.org
Reporter: xiao.hk1997 at gmail.com
CC: dino at apple.com, graouts at apple.com
Created attachment 464263
--> https://bugs.webkit.org/attachment.cgi?id=464263&action=review
Safari screencast
I notice that applying CSS transform on SVG groups would cause their children text elements to flicker in Safari.
The transformation of other elements looks smooth in Safari. The transformation of all children looks smooth in Firefox or Chrome.
See attached videos for example. The code is at https://codepen.io/xiaohk/pen/yLqOZXx.
Related stack overflow questions:
1. https://stackoverflow.com/questions/74967088/applying-css-transform-on-svg-group-e-g-d3s-zoom-transform-causes-its-text
2. https://stackoverflow.com/questions/26837616/css-transform-rotation-causes-text-flicker-in-safari-8-yosemite
3. https://stackoverflow.com/questions/15751012/css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
4. https://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform
I tried to set `-webkit-transform-style:preserve-3d;`, `-webkit-transform: translateZ(0);`, and `-webkit-filter: opacity(1);`, but they didn't work.
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20221231/5a40e4c2/attachment.htm>
More information about the webkit-unassigned
mailing list