Why can't Firefox Focus play this animation properly on android?
I found a great use of css to create a 2001-style slitscan animation: https://codepen.io/PavelLaptev/pen/oxwXEB From my tests, it works:
- on PC (Windows 7) in Chrome and IE11
- on iPhones in Safari
- on iPads in Safari, Firefox and Firefox Focus
- on androids in Chrome and Samsung Internet.
But in Firefox 80 on PC and Firefox Focus on android, the animation does not move or, when it does, it moves unpredictably for a few seconds then stops. "Can I Use" says "@keyframes is unsupported in scoped stylesheets in Firefox" - https://caniuse.com/?search=%40keyframe -, but the codepen doesn't use a scoped stylesheet. One peculiarity on PC (Windows 7) is that the animation **does** move in Firefox 80 if I scroll the codepen HTML, CSS or JS panels above it. The other peculiarity is that on iOS, Firefox animates it correctly.