How to prevent artifacts from appearing in Webkit when scrolling the page after stopping CSS animations

Question

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.

Answer 1

Add this to the css where you call animitions:

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

It forces hardware acceleration.

Answer 2

I had this issue also.

translate3d should be applied to all children which involved in displaying artifacts.

Working CSS for scrolling container and all children inside of it

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}