html - -webkit-背景剪辑 : text on an element with transition is not working after the transition is over in mozilla but working perfect in chrome

Question

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

当我使用动画属性代替过渡时，效果很好。但是我对过渡属性很好奇。编辑:如果我不使用过渡属性，该片段在 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 无关，但从基于您的代码片段的测试来看，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