-webkit-background-clip：在 mozilla 中过渡结束后，带有过渡的元素上的文本不起作用，但在 chrome 中完美运行

Question

我在一个元素上应用了 -webkit-background-clip: text 属性。该元素也具有过渡属性。 webkit 背景剪辑属性在过渡期间工作正常，但在过渡结束后，它在 mozilla firefox 中不再工作，但在 chrome 中工作正常。请帮我解决这个问题。

当我使用动画属性代替过渡时，效果很好。但我对过渡属性很好奇。 编辑：如果我不使用过渡属性，sn-p 在 mozilla web xbrowser 中可以正常工作。

我希望在 Firefox 中过渡结束后渐变保留在文本上。

div {
  height: 200px;
  margin-top: 2rem;
  padding-right: 3rem;
  padding-bottom: 1.5rem;
  display: inline-block;
  font-size: 10rem;
  position: relative;
  background-image: linear-gradient(to right, red, green, blue, gold, pink, violet, purple);
  -webkit-background-clip: text;
  color: transparent;
  border: 1px solid red;
  transition: transform 3s;
}

div:hover {
  transform: translateX(500px);
}

<div>Test</div>

CodePen

Answer 1

您似乎遇到了 Firefox 错误。问题似乎与transition 无关，但从基于您的sn-p 的测试来看，Firefox 似乎拒绝呈现被翻译超过其一半宽度的元素的-webkit-background-clip: text：

onload=function(){
document.querySelectorAll('input').forEach(i=>i.oninput())}

#t {
  display: inline-block;
  background-image: linear-gradient(to right, red, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateX(61px);

  outline: 1px solid red;
  font-size: 100px;
  color: green;
  font-family: monospace
}

  <div id="t"></div>
<p>
  Translate: <input type="range" min="0" max="600" value="30" step="1" oninput="t.style.transform='translateX('+this.value+'px)';tr.value=this.value"> <output id="tr"></output>
  <br>
  Content: <input type="text" value="a" oninput="t.textContent=this.value;w.value=getComputedStyle(t).width"><br>
  Width: <output id="w"></output>

---

---

错误提交：https://bugzilla.mozilla.org/show_bug.cgi?id=1545128