Scale动画结束后SVG textPath文本抖动问题及WebKit环境解决方案

问题现象 #

制作了一个包含SVG textPath的动画，在Chrome、Edge等WebKit内核浏览器中出现两处异常：

• 缩放动画结束后，文本末尾发生抖动
• 快速刷新页面时，路径会先变形再恢复，视觉体验糟糕
  Firefox浏览器无此问题。

无效修复尝试 #

以下方法均未能解决问题：

• 设置backface-visibility: hidden;
• 为SVG设置固定px尺寸（替换百分比尺寸）
• 为容器添加transform-style: preserve-3d

有效解决方案 #

为.warning text添加与.wrapper缩放动画并行的独立动画，且缩放值需略小于1（如scale(0.98)），代码如下：

.warning text {
  animation: transformTextInSvg 1.5s ease-in-out forwards;
}

@keyframes transformTextInSvg {
 to { transform: scale(0.98)  rotateZ(-70deg); }
}

初始代码 #

<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      min-height: 100vh;
      background-color: black;
    }

    .wrapper {
      position: relative;
      top: 60px;
      transform: rotateX(90deg) scale(0);
      animation: flight 1.5s ease-in-out forwards;
    }

    @keyframes flight {
      to {
        transform: rotateX(50deg) scale(1);
      }
    }

    .vinyl {
      position: relative;
      width: 450px;
      height: 450px;
      background-color: red;
      border-radius: 50%;
      animation: rotation 12s linear infinite 2s;
    }

    @keyframes rotation {
      from {
        transform: rotateZ(0);
      }

      to {
        transform: rotateZ(-360deg);
      }
    }

    .warning {
      position: absolute;
      width: 105%;
      height: 105%;
      top: -7px;
      left: -15px;
    }

    .warning text {
      font-size: 5px;
      font-weight: 500;
      fill: white;
      transform: rotateZ(-70deg);
      transform-origin: 50% 50%;
    }
  </style>    
</head>    
<body>
  <div class="wrapper">
    <div class="vinyl">
      <svg class="warning" width="450" height="450" viewBox="0 0 52.917 52.917" xmlns="http://www.w3.org/2000/svg">
        <path id="spiral" style="display:inline;fill:none;fill-rule:evenodd;stroke:none;stroke-width:.0750443"
          d="M42.56 11.55c2.213 1.212 5.243 7.313 5.522 13.066.648 13.413-8.465 22.991-21.887 22.937C15.32 47.509 5.941 38.12 5.893 26.387 6.59 14.11 16.375 6.444 26.743 6.422c9.677-.02 16.072 7.939 16.418 18.383.375 11.326-7.027 18.057-17.144 18.019-8.46-.032-15.738-7.48-15.673-16.628.06-8.392 6.526-15.59 14.464-15.505 8.707.092 13.934 5.951 13.831 13.78-.113 8.678-4.97 13.737-12.805 13.473-5.96-.2-11.075-5.466-10.884-11.947.168-5.69 3.886-10.46 9.25-11.262 4.005-.598 8.664 1.744 8.932 6.845.318 6.044-3.382 11.582-7.49 11.253" />

        <text>
          <textPath href="#spiral">Something happened or the requested page not found. Please, reload, try the menu above or go back to the main page.
          </textPath>
        </text>
      </svg>
    </div>
  </div>
</body>    
</html>

内容的提问来源于stack exchange，提问作者Onod