웹킷 변환의 웹킷 전환시 깜박임 방지

웹킷 변환의 웹킷 전환시 깜박임 방지

---

가능한 중복 :
아이폰 웹킷 CSS 애니메이션으로 깜박임 발생

어떤 이유로 든 webkit-transform 속성의 애니메이션이 발생하기 직전에 약간의 깜박임이 있습니다. 내가하고있는 일은 다음과 같습니다.

CSS :

#element {
    -webkit-transition: -webkit-transform 500ms;
}

자바 스크립트 :

$("#element").css("-webkit-transform", "translateX(" + value + "px)");

전환이 발생하기 직전에 깜박임이 있습니다. 왜 이것이 뭔지, 어떻게 문제를 해결할 수 있습니까?

감사!

업데이트 : 이것은 Safari에서만 발생합니다. 애니메이션이 작동하지만 Chrome에서는 발생하지 않습니다.

---

해결책은 다음과 같습니다 .iPhone WebKit CSS 애니메이션으로 인해 깜박임이 발생 합니다.

요소의 경우 설정해야합니다

-webkit-backface-visibility: hidden;

---

규칙:

-webkit-backface-visibility: hidden;

스프라이트 또는 이미지 배경에는 작동하지 않습니다.

body {-webkit-transform:translate3d(0,0,0);}

바둑판 식으로 배열 된 배경을 조입니다.

나는 no-flick라는 클래스를 만들고 이것을 수행하는 것을 선호합니다.

.no-flick{-webkit-transform:translate3d(0,0,0);}

---

깜박이는 요소에이 CSS 속성을 추가하십시오.

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

(그리고 Nathan Hoad에게도 큰 감사를드립니다 : http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit )

---

나는 사용해야했다 :

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

페이지로드 후 전환이 처음 발생할 때 여전히 깜박임이 발생합니다.

---

자세한 설명은이 게시물을 확인하십시오.

http://www.viget.com/inspire/webkit-transform-kill-the-flash/

나는 그것을 몸 전체에 적용하는 것을 피할 것입니다. 핵심은 미래에 변환하려는 특정 요소가 3D로 렌더링되기 시작하여 브라우저가 렌더링 모드를 전환하거나 전환하지 않아도되도록하는 것입니다. 첨가

-webkit-transform: translateZ(0) 

애니메이션 요소에 대해 (또는 이미 언급 된 옵션 중 하나)이 작업을 수행합니다.

---

-webkit-backface-visibility: hidden;번역 요소와 -webkit-transform: translate3d(0,0,0);모든 하위 요소에 적용 하면 깜박임이 사라집니다.

---

문제가있는 요소에 대해 하드웨어 가속 렌더링을 트리거합니다. 성능을 위해 *, body 또는 html 태그 에서이 작업을 수행하지 않는 것이 좋습니다.

.problem{
  -webkit-transform:translate3d(0,0,0);
}

---

위의 두 가지 대답 모두 비슷한 문제로 작동합니다.

그러나 본문 {-webkit-transform} 접근 방식으로 인해 페이지의 모든 요소가 효과적으로 3D로 렌더링됩니다. 이것은 최악이 아니지만 텍스트 및 기타 CSS 스타일 요소의 렌더링을 약간 변경합니다.

원하는 효과 일 수 있습니다. 페이지에서 많은 변형을 수행하는 경우 유용 할 수 있습니다 . 그렇지 않으면 요소에 -webkit-backface-visibility : hidden 변환이 가장 침습적이지 않은 옵션입니다.

참고 URL : https://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform