css - 在 Firefox 中对背景剪辑（ed）文本进行了两次转换

Question

转换具有其 css 属性background-clip: text;集的标题文本元素 - 在 Firefox（版本 90.0.2）上应用了 2 次。

相同的 css 在 Chrome 中按预期运行。

您可以在下面的示例中看到元素（具有 1px 边框）旋转了 45 度，但剪裁的文本再次旋转（到 90 度） - 在 Firefox

.center-text {
  margin-top: 25vh;
  text-align: center;
}
.heading-transform {
  background-image: linear-gradient(to right, #ff0066, #0066cc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border: 1px solid #000;
}

.heading-transform:hover {
  transform: rotateZ(45deg);
}

<div class="center-text">
  <h2 class="heading-transform">
    Should rotate around z only 45degs
  </h2>
</div>

这仅在background-clip: text;设置时发生。

任何可能的解决方法来防止这种情况？

Answer 1

_{这显然是一个错误，我建议将其报告给Mozilla}

这种行为很容易避免！只需transform任何父元素。

.center-text {
  margin-top: 25vh;
  text-align: center;
}
.center-text:hover {
  transform: rotateZ(45deg);
}

.heading-transform {
  background-image: linear-gradient(to right, #ff0066, #0066cc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border: 1px solid #000;
}

<div class="center-text">
  <h2 class="heading-transform">
    Should rotate around z only 45degs
  </h2>
</div>

Interactive Code

万一.center-text不能变形，h2用另一个容器包起来。