Search code examples
csswebkitcss-animationsmobile-webkit

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:

  1. Setting the animation duration to minimum.
  2. Setting -webkit-animation to 'none'
  3. Pausing the animation using -webkit-animation-play-state

None of these fixed the artifacts.

Solution

  • Add this to the css where you call animitions:

    -webkit-transform: translate3d(0,0,0);

    It forces hardware acceleration.