3

I've applied -webkit-background-clip: text property on an element. This element has transition property as well. The webkit background clip property works fine during the transition but after the transition is over it is not working anymore in mozilla firefox but working fine in chrome. Please help me with this.

When I used animation property in place of transition, it worked fine. But I am curious about the transition property. Edit: The snippet works fine in mozilla web xbrowser if I don't use the transition property.

I want the gradient to stay on the text after the transition is over in 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

Abhi
  • 57
  • 6
  • 1
    Possible duplicate of [-moz-background-clip:text does not work in Firefox](https://stackoverflow.com/questions/9362639/moz-background-cliptext-does-not-work-in-firefox) – MattHamer5 Apr 17 '19 at 10:38
  • @Matt.Hamer5 thank you for the review but it is different because the code snippet works fine in mozilla web browser if I don't use the transition property. – Abhi Apr 17 '19 at 12:28

1 Answers1

3

As it seems you have ran into Firefox bug. Problem appears to be unrelated to transition, but from test based on your snippet its seems that Firefox refuses to render -webkit-background-clip: text of element that is translated more than its half width away:

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>

Screencap of above snippet in Firefox (Nightly)

Bug filed: https://bugzilla.mozilla.org/show_bug.cgi?id=1545128

myf
  • 9,874
  • 2
  • 37
  • 49
  • (Since this not answer but mere a refined information from question, feel free to accommodate it there if you feel it matches the problem and I'll delete this. In the meantime I'll look for / fill bugreport.) – myf Apr 17 '19 at 11:58
  • you explained the problem very well, I didn't know the root cause of it. Thank you. Now I know why's that happening. – Abhi Apr 17 '19 at 12:39
  • I tried changing the container width but still no luck, I thought it might work. – Abhi Apr 17 '19 at 13:01
  • Yes, it really seems it is linked to bounding box of text node rather than container, what makes it even stranger. I think at this moment trying such workarounds is quite pointless, the only viable approach is give up transform and resort to position :( – myf Apr 17 '19 at 14:03
  • Yes, the approach that's gonna cost some performance :/ I think that's the answer for now. Thank you :) – Abhi Apr 17 '19 at 15:10
  • This isn't the answer. The code above removes the use of `position: relative` which breaks background clip. That's why this answer works. – Ben Racicot Feb 20 '23 at 13:42