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!