Safari不支持CSS转换源，`transform-b ox：fill-box`无效

Question

我正在使用transform: scale(0.8, 1)来压缩此时钟面上两位数字的宽度。在不同时使用transform-origin的情况下，数字也会滑出相应的位置。

我正在使用的transform-origin在Chrome和Firefox上运行正常，但在Safari上没有任何区别。它的外观如下：

这是Safari显示的内容：

到目前为止，关于此问题的所有发现都表明，transform-box: fill-box可以解决Safari的此问题，但是对我而言，这没有任何区别。一些较旧的解决方案与使用-webkit-前缀有关，但这无济于事，无论如何，这仅是许多较旧版本的Safari的问题。

样式是在JavaScript中应用的，因为这些元素是动态创建的：

        text2.setAttribute('x', x2.toString());
        text2.setAttribute('y', y2.toString());
        text2.setAttribute('dy', '3.5');
        text2.classList.add('clock-face');
        text2.textContent = h.toString();

        if (h > 9) {
          text2.style.transformBox = 'fill-box';
          text2.style.transform = 'scale(0.8, 1)';
          text2.style.transformOrigin = [10, 19, 28][h - 10] + '%';
        }

我也试图通过样式表强制执行此问题，但无济于事：

.clock-face {
  font-family: $clock-face-font;
  font-size: 10px;
  letter-spacing: -0.05em;
  text-anchor: middle;
  fill: white;
  transform-box: fill-box !important;
  user-select: none;
}

这些样式的其余部分肯定会被应用，因此，这并不是说CSS通常会被忽略。 Web检查器确认已应用transform-box：

关于解决此问题的任何建议将不胜感激。

Answer 1

这不是理想的选择，我仍然想知道transform-origin发生了什么，但是通过使用dx属性而不是transform-origin来解决问题的方法与Safari和其他浏览器兼容，好。

        if (h > 9) {
          text2.style.transform = 'scale(0.8, 1)';
          text2.setAttribute('dx', ['4', '8', '12.5'][h - 10]);
        }