웹킷에서 깜박임 방지 웹킷 변환

웹킷에서 깜박임 방지 웹킷 변환

이 질문에는 이미 다음과 같은 답이 있습니다.

마감됨10년 전에.

중복 가능성:
아이폰 웹킷 CSS 애니메이션은 깜박임을 일으킵니다.

어떤 이유에서인지 웹킷 변환 속성 애니메이션이 발생하기 직전에 약간 깜박입니다.제가 하고 있는 일은 다음과 같습니다.

CSS:

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

JavaScript:

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

전환이 발생하기 직전에 깜박임이 발생합니다.왜 그런지, 그리고 어떻게 하면 문제를 해결할 수 있는지 아십니까?

감사합니다!

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

해결책은 여기에 언급되어 있습니다: 아이폰 웹킷 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)

자세한 설명은 다음 게시물을 참조하십시오.

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

저는 그것을 몸 전체에 바르는 것을 확실히 피할 것입니다.중요한 것은 앞으로 변환할 특정 요소가 3D로 렌더링되기 시작하여 브라우저가 렌더링 모드를 전환하거나 전환하지 않도록 하는 것입니다.추가 중

-webkit-transform: translateZ(0) 

(또는 이미 언급한 옵션 중 하나)를 애니메이션 요소에 적용하면 이 작업이 수행됩니다.

다음을 사용해야 했습니다.

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

요소에서, 또는 페이지 로드 후 처음 전환이 발생했을 때 여전히 깜박임이 발생합니다.

나는 그것을 적용하는 것을 발견했습니다.-webkit-backface-visibility: hidden;번역 요소 및-webkit-transform: translate3d(0,0,0);모든 아이들에게, 깜박임은 사라집니다.

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

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

위의 두 답변 모두 저에게 비슷한 문제가 있습니다.

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

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

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