我注意到对SVG组应用CSS转换会导致其子文本元素在Safari中 Flink 。其他元素的转换在Safari中看起来很平滑。所有子元素的转换在Firefox或Chrome中看起来都很平滑。
看下面的视频例子。代码附在这篇文章的最后，也在https://codepen.io/xiaohk/pen/yLqOZXx。

野生动物园

火狐

chrome 合金

尝试的变通方法

我发现了几个相关的问题：

• CSS Transform (rotation) causes text flicker in Safari 8 (yosemite)
• CSS Transform causes flicker in Safari, but only when the browser is >= 2000px wide
• Prevent flicker on webkit-transition of webkit-transform

然而，所有的解决方案并不适用于我的问题。例如，我试图设置-webkit-transform-style:preserve-3d;、-webkit-transform: translateZ(0);和-webkit-filter: opacity(1);。
如有任何建议，欢迎提出，谢谢！

const svg = d3.select('.svg-element');
const group = svg.append('g')
  .attr('class', 'container-group');

group.append('circle')
  .attr('cx', 120)
  .attr('cy', 100)
  .attr('r', 20)
  .style('fill', 'pink')

const ys = [80, 100, 120, 140, 160];
const text = group.selectAll('text.my-text')
  .data(ys)
  .join('text')
  .attr('class', 'my-text')
  .attr('x', (_, i) => 250 + i * 10)
  .attr('y', d => d)
  .text('A quick and lazy fox.')

svg.call(
  d3.zoom()
    .extent([[0, 0], [500, 300]])
    .scaleExtent([1, 8])
    .on("zoom", zoomed)
);

function zoomed({transform}) {
    group.attr("transform", transform.toString());
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px 0;
  -webkit-transform-style:preserve-3d;
  -webkit-filter: opacity(1);
}

.svg-element {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

g.container-group {
  -webkit-backface-visibility: hidden;
}

text.my-text {
  -webkit-transform-style:preserve-3d;
  -webkit-transform: translateZ(0);
  pointer-events: none;
  dominant-baseline: middle;
  text-anchor: middle;
}

<script src="https://d3js.org/d3.v7.min.js"  charset="utf-8"></script>

<div class="container">
  <svg class="svg-element" width=300 height=300>
</div>