Bug 249962

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.