Shaky animation with transform (not intended)
I've encountered an issue while attempting to animate a cursor using the transform property. Strangely, as the animation nears its completion, a slight shaking behavior emerges. This quirk exclusively manifests in Mozilla Firefox and is absent in Chromium. Below, you'll find the HTML and CSS code I've been working with (without animations): https://codepen.io/uneknown/pen/OJaYKLm
Edit: I do the animation using
transform: translateX();3 Replies
Could you update the codepen with the animation that's causing the issue?
It's the sub-pixel rendering as it moves. I see it in Chrome too, but it's not nearly as bad.
As for a solution, the one I thought of doesn't work, lol. Also, the example doesn't animate at all for me in FF 🤷 (i switched it to a CSS animation to see it in action)
The reason for this is firefox doesn't do any anti-aliasing in CSS animations.
The best solution I can think of is to update you shadow to have a very slight blur, which sort of fakes the anti-alisasing.
box-shadow: 0 0 .5px 1px black;