-webkit-background-clip: текст в элементе с переходом не работает после завершения перехода в Mozilla, но отлично работает в 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