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

Tags: css3,webkit,css-animations,mobile-webkit

Problem :

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.

    CSS Howto..

    How do you wrap one text div around another that follows as a sibling in the DOM?

    Using css modules how do I define a global class

    How to position text on bottom?

    How to use CSS filters in JavaScript?

    css-how to set a three parallel DIV?

    How to spread a div to cover available space in a parent container?

    How to visually indicate current page in ASP.NET MVC?

    How to load CSS filed inside the body in JSP?

    How to make the opposite effect of Hover in css [duplicate]

    Hover img to show an absolutely positioned div isn't working

    How to lay down elements vertically from top to bottom, and then from right to left, using a clean HTML markup?

    CSS: How do I get wrapped labels to align

    How to style responsive table to make table like list?

    How to create shape image border with clickable container?(use HTML and CSS)

    How to do HTML/CSS form helpers/popover

    How to float inline elements with css

    How to disable selection with specific class with js/css?

    how decrease font size?

    How to get relative CSS from photoshop artboard?

    How do you structure css files for a web project?

    How to divide a border into 4 equal parts?

    How to give style to iframed page content using parent pages css?

    How to create angled double border effect CSS

    How should I make this code to display inline

    How to apply css to particular selected child in ivh-treeview?

    How to write css for fixed header and scrollable table

    How to change color icon in Materialize?

    How to always refresh file loaded by ajax, avoiding cached file

    in css, how to responsively stick element to certain background image part?

    How to hide all element on html page except one div using css?