Bug 249962

Summary: Applying CSS transform on SVG group causes its text elements to flicker in Safari
Product: WebKit Reporter: Jay Wang <xiao.hk1997>
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Major CC: ahmad.saleem792, dino, graouts, mmaxfield, sabouhallawa, simon.fraser, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: All   
OS: macOS 13   
See Also: https://bugs.webkit.org/show_bug.cgi?id=250020
Attachments:
Description Flags
Safari screencast
none
Firefox screencast
none
Chrome screencast none

Jay Wang
Reported 2022-12-30 17:58:41 PST
Created attachment 464263 [details] 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.
Attachments
Safari screencast (1.75 MB, image/gif)
2022-12-30 17:58 PST, Jay Wang 		no flags
Details
Firefox screencast (1.10 MB, image/gif)
2022-12-30 17:59 PST, Jay Wang 		no flags
Details
Chrome screencast (1.30 MB, image/gif)
2022-12-30 17:59 PST, Jay Wang 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Jay Wang
Comment 1 2022-12-30 17:59:31 PST
Created attachment 464264 [details] Firefox screencast
Jay Wang
Comment 2 2022-12-30 17:59:54 PST
Created attachment 464265 [details] Chrome screencast
Simon Fraser (smfr)
Comment 3 2023-01-03 15:28:21 PST
I think this is about font sizes getting rounded to integral values.
Radar WebKit Bug Importer
Comment 4 2023-01-06 17:59:18 PST
<rdar://problem/103975675>
Ahmad Saleem
Comment 5 2023-10-02 18:24:25 PDT
*** This bug has been marked as a duplicate of bug 46987 ***
Note You need to log in before you can comment on or make changes to this bug.