html - -webkit-background-clip:过渡元素在mozilla中过渡结束后无法正常工作，但在chrome中可以正常工作

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

当我使用动画属性代替过渡效果时，效果很好。但是我对转换属性感到好奇。
编辑：如果我不使用transition属性，则该片段在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

最佳答案

看来您遇到了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

关于html - -webkit-background-clip:过渡元素在mozilla中过渡结束后无法正常工作，但在chrome中可以正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55725461/