background-clip(ed) 文本的转换在 Firefox 中应用了两次

Question

转换 header 文本元素，其设置了 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包裹在另一个容器中。

background-clip(ed) 文本的转换在 Firefox 中应用了两次

Transformation on background-clip(ed) text is applied two times in Firefox

css

firefox

css-transforms