It all started with a slightly crazy idea. I wanted some text to have a linear gradient. This can be done by using the value text
for background-clip
and the desired background image/colour. Although being non-standard, the value text
is well-supported. The result looked great—I have no screenshot so you just have to trust me. However, when I added an animation, strange things happened in my Firefox (v80). After the animation finished, the background covers the entire box. I figured out that this was related to setting the animation-fill-mode
to either forwards
, backwards
or both
. But see for yourself:
See the Pen Firefox bug background-clip and animation by @kjan on CodePen.
The good news is that there is an easy workaround for this. All you have to do is to set the animation on a wrapper element and give it a background colour. Transparent does not work—in case you are wondering.