How to prevent artifacts from appearing in Webkit when scrolling a page after stopping CSS animation

Question

Under certain conditions, I have to stop the CSS keyframe animation. If I later scroll through the page, I tend to receive artifacts on the screen. They appear where the div I stopped before stopping the animation. Sometimes I get a “trace” of these artifacts from the starting position to the new position of the previously animated div.

In desktop Chrome, I usually see only one artifact (redrawing over the artifact erases it), but in iOS Safari I have a confused track.

I tried to stop the CSS animation using different methods, and I always get the same result. I add a class to the div that defines the new location (top / left, the div itself is in relative position) and the property that stops the animation, I tried:

• Set the minimum duration of the animation.
• Setting -webkit-animation to 'none'
• Pause animation using -webkit-animation-play-state

None of them recorded artifacts.

Answer 1

Add this to css where you call the animations:

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

This forces hardware acceleration.

Answer 2

I also had this problem.

translate3d should apply to all children involved in displaying artifacts.

Working CSS for scrolling a container and all its children

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