背景剪辑（ed）文本的转换在 Firefox 中应用了两次

2024-05-19 • 问答

转换设置了 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; 时发生。

是否有任何可能的解决方法来防止这种情况发生？

jlgrt 回答：背景剪辑（ed）文本的转换在 Firefox 中应用了两次

_{这显然是一个错误，我建议将其报告给 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 包装在另一个容器中。

css css-transforms firefox

本文链接：https://www.f2er.com/1756.html

背景剪辑（ed）文本的转换在 Firefox 中应用了两次

jlgrt 回答：背景剪辑（ed）文本的转换在 Firefox 中应用了两次

大家都在问