Home > Web Front-end > CSS Tutorial > Why is My CSS Animation Flickering on iPhone, and How Can I Fix It?

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

DDD
Release: 2024-12-06 03:42:09
Original
709 people have browsed it

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;
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template