[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