How to prevent artifacts from appearing in Webkit when scrolling the page after stopping CSS animations
Under certain conditions I have to stop CSS keyframe animations. If I scroll the page afterwards, I tend to receive artifacts on the screen. They appear where the div which I stopped was before stopping the animation. Sometimes I get a 'trail' of these artifacts from the original position to the new position of the previously animated div.
In desktop Chrome, usually I only see a single artifact (redrawing over an artifact erases it), yet in iOS Safari, I have a messed up trail of them.
I tried stopping the CSS animation using different methods, and I always end up with the same result. I add a class to the div which defines a new location (top/left, the div itself is on relative position), and a property which stops the animation, I tried:
- Setting the animation duration to minimum.
- Setting -webkit-animation to 'none'
- Pausing the animation using -webkit-animation-play-state
None of these fixed the artifacts.
Add this to the css where you call animitions:
It forces hardware acceleration.