[iOS] 아이폰에서 버벅거리는 CSS animation 오류 잡기

페이지 로드 시 텍스트가 자연스럽게 둥실 떠오르는 css transform animation을 만들었는데

유독 모바일 iOS에서만 깜빡거리거나 버벅거리며 애니메이션이 제대로 실행되지 않음

 

여러 단계로 쪼갰던 애니메이션을 from과 to로 간단하게 수정했는데

그래도 아이폰에서는 애니메이션이 깜빡거림 + 버벅거림

 

stackoverflow에 Animation flickering을 검색해 알아낸 여러가지 방법들

 

-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

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

-webkit-backface-visibility: hidden; backface-visibility: hidden;

-webkit-perspective: 1000;

 

하나씩 적용해봤을때는 안됐는데 다섯개 다 집어넣으니 아이폰에서 버벅거리던 것이 없어짐

no-flick 등 클래스명으로 reset 잡아주면 좋을듯

(참고 url : stackoverflow.com/questions/52717887/animation-flickering)