title: How to prevent artifacts from appearing in Webkit when scrolling the page after stopping CSS animations
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>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:</p>
  
  <ol>
  <li>Setting the animation duration to minimum.</li>
  <li>Setting -webkit-animation to 'none'</li>
  <li>Pausing the animation using -webkit-animation-play-state</li>
  </ol>
  
  <p>None of these fixed the artifacts.</p>