Bug 249962 – Applying CSS transform on SVG group causes its text elements to flicker in Safari

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Animations

[Jay Wang]

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.

[Jay Wang]

Created attachment 464264 [details]
Firefox screencast

[Jay Wang]

Created attachment 464265 [details]
Chrome screencast

[Simon Fraser (smfr)]

I think this is about font sizes getting rounded to integral values.

[Radar WebKit Bug Importer]

<rdar://problem/103975675>

[Ahmad Saleem]

*** This bug has been marked as a duplicate of bug 46987 ***