Firefox bug: when background-clip and animation-fill-mode are used together

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.