Why is My CSS Animation Flickering on iPhone, and How Can I Fix It?

Flickering CSS Animations in iPhone WebKit

In an iPhone application, CSS animations used in a game caused flickering. The flicker occurred when elements snapped into place after being scrolled. The only WebKit animations used were for transition (either instant or 0.2-second ease-out) and translation.

Upon clicking "Match items" followed by "Play again," the entire background of accessories/purses turned white during the animation of guns scrolling in.

Solution:

Adding -webkit-backface-visibility helped reduce the flickering, but an initial flicker persisted after reloading the page. The complete solution involved adding -webkit-perspective: 1000. With this additional property, the flickering was eliminated.

The code to resolve the issue:

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

The above is the detailed content of Why is My CSS Animation Flickering on iPhone, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!