iPhone WebKit CSS 애니메이션으로 인해 깜박임 발생

83

이것은 아이폰 사이트입니다 : http://www.thevisionairegroup.com/projects/accessorizer/site/

"지금 플레이"를 클릭하면 게임이 시작됩니다. 총이 스크롤됩니다. 지갑과 액세서리를 위아래로 스크롤 할 수 있습니다. 놓으면 제자리에 끼워지는 것을 볼 수 있습니다. 스냅이 발생하는 것처럼 깜박임이 발생합니다. 내가 사용하는 유일한 웹킷 애니메이션은 다음과 같습니다.

'-webkit-transition': 'none'

'-webkit-transition': 'all 0.2s ease-out'

'-webkit-transform': 'translate(XXpx, XXpx)'

애니메이션을 적용할지 여부에 따라 첫 번째 또는 두 번째 전환 중 하나를 선택하고 변형은 내가 사물을 이동하는 유일한 방법입니다.

하지만 가장 큰 문제는 "항목 일치"를 클릭 한 다음 "다시 재생"을 클릭하는 것입니다. 총이 움직이면 액세서리 / 지갑의 전체 배경이 흰색으로 변하는 것을 볼 수 있습니다. 누군가가 왜 이런 일이 발생하는지에 대한 통찰력으로 나를 발산 할 수 있습니까 ??

iphone  css  animation  webkit  flicker 
— 제이크 차파
소스

답변:

126

내가 추가 -webkit-backface-visiblity했고 대부분 도움이되었지만 페이지를 다시로드 한 후에도 여전히 초기 깜박임이 발생했습니다. 를 추가했을 때 -webkit-perspective: 1000깜박임이 전혀 없었습니다.

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
— 웨스 베이커
소스
21
1000 뒤에 숨겨진 마법은 무엇입니까? 다른 값 (> 0)이 작동 할 수 있습니까?
— cYrus
참고 : 이로 인해 Windows chrome v19에서 애니메이션이 마우스 이벤트에 응답하지 않게됩니다. 실제로 추가하면 깜박임이 없지만 애니메이션이 항상 시작되는 것은 아닙니다 (마우스를 가리킬 때 등)
— skyline26
1
참고 : 뒷면 가시성을 추가하면 색상 렌더링이 변경됩니다. 여기에 오프이면에는 가시성 예입니다 bit.ly/13ldbvY
— Tamik Soziev
3
링크 요소를 전환하려고 할 때 텍스트가 깜박이는 문제가 발생했습니다. 뒷면 가시성을 변경하면 앤티 앨리어싱이 변경되어 글꼴이 정말 얇아졌습니다. -webkit-font-smoothing : subpixel-antialiased를 사용하여 수정되었습니다.
— Dan
1
@cYrus 나는 우리가 결코 알지 못할 것이다 추측
— 데니
39

이것을 시도하면 도움이 될 것입니다.

#game {
  -webkit-backface-visibility: hidden;
}
— Donohoe
소스
2
이것은 Safari 기본값에서 잘 작동하지만 독립 실행 형 모드에서는 실패합니다. 아이디어가 있습니까?
— cYrus
18 
body {-webkit-transform:translate3d(0,0,0);}
— Brian D' Astous
소스
이것은 나를 위해 그것을했다. 그러나 나는 그것을 #wrapper바디에 적용하는 것이 레이아웃을 망칠 것이기 때문에 그것을 요소 에 적용해야했다 .
— adamJLev
누군가 뒷면을보고 싶다면 "-webkit-backface-visibility : hidden;" 작동하지 않았지만 이것은 완벽합니다. 감사!
— Nachtgold
완전한. -webkit-backface-visibility: hidden;스케일 변환이 흐릿 해졌습니다. body {-webkit-transform:translate3d(0,0,0);}치료를 받았습니다.
— Liam
나는 노력하고 있지만 그것은 나를 위해 작동하지 않습니다. 다음은 코드 스 니펫입니다. codeply.com/go/g7Zp98paz5
— Fran_gg7
1
이것은 나를 위해 일했습니다. 제 경우 scale(1)에는 깜박임이 발생했습니다. 감사합니다
— jansesun
12

제 사건에 대한 실제 답은 여기에 있습니다. 누군가와 가까웠습니다 : -webkit-backface-visibility : hidden; 그러나 진짜 대답은 -webkit-backface-visibility : hidden; 상위 div에 추가해야합니다 .

— 요한 데 실바
소스
실제로 -webkit-backface-visibility: hidden;부모 div, 애니메이션 div 및 애니메이션 div의 자식 을 추가 해야했습니다. 일단 그렇게하면 완벽하게 작동했습니다.
— mattstuehler 2013 년
2
나는 그것을 부모에게 추가함으로써 내 깜박임을 수정했다고 생각합니다. 실제로 무엇을합니까?
— chovy
부모에 추가하면 자식 요소의 "고정 된"위치가 취소됩니다. (
— James
11

"깜박이는"CSS 전환에도 문제가있었습니다. 문제의 애니메이션은 화면 밖에서 미끄러지는 메뉴 였고 애니메이션이 끝나 자마자 전체 메뉴가 깜박이거나 깜박 거 렸습니다.

결과적으로 이것은 실제 iOS 기능인 "탭 강조 표시" 로 인해 발생했습니다. 어떤 이유로 CSS 애니메이션이 완료된 후 (즉, 실제 탭 후) 시작되어 요소 만 대신 전체 메뉴를 강조 표시했습니다. 도청되었습니다. 여기에 설명 된대로 탭 강조 표시를 완전히 비활성화하여 문제를 "수정"했습니다 .

-webkit-tap-highlight-color: rgba(0,0,0,0);
— Fresskoma
소스
5

Michael의 대답 -webkit-backface-visibility: hidden; 은 우리가이 문제에 부딪혔을 때 효과가있었습니다. 우리는 한 translateZ(0px)우리에 <body>아이폰 OS 3.1.3 및 이전 방지하기 위해 태그 IFRAME경계 버그 및 플리커에 anims를 일으켰습니다. -webkit-backface-visibility: hidden;애니메이션 된 각 요소에 추가 하면 깜박임이 수정되었습니다! 생명의 은인.

— 롭 바 레카
소스
3 
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

나는 div에 호버 상태가있을 때 CSS 또는 js가 첨부되어 있지 않아도 페이지가 깜박입니다. 다른 사람에게 도움이 될 수도 있습니다.

— 제시
소스
나를 위해 그 사람이 트릭을했습니다. 나머지는 전환이있을 때만 관련이있었습니다.
— Nadav
3

뒷면 가시성이 작동하지 않는 사람이 있다면 애니메이션 요소에 이미있는 속성을 볼 수 있습니다. 우리 overflow-y: scroll는 absolute또는 fixed배치 된 요소가 iOS에서 큰 깜박임을 유발 한다는 것을 발견했습니다 .

간단히 제거 overflow-y: scroll하면 해결되었습니다.

— KendallB
소스
제거 overflow-y: scroll는 제 사건을 도왔습니다. 정말 고맙습니다!
— YemSalat
아마 제 경우 일 것입니다. 그러나 나는이 요소에 대한 절대적인 위치 인 오버 플로우를 제거 할 수 없다. 어떤 생각?
— Kobi Cohen
1

비록 내가했다 -webkit-transform-style: preserve-3d;및 -webkit-backface-visibility: hidden깜박임은 여전히 일어나고 있었다.

제 경우에는 원인이 z-index. 활성 요소에서이를 늘리면 도움이되었습니다.

— 모르페우스
소스
0

여기에 새로운 솔루션이 있습니다. 나는 jQuery로 배경 이미지를 설정하고 있었는데 3D 렌더링 트릭이 작동하지 않았습니다. 그래서 대신 클래스를 사용하여 속성을 정의하려고했습니다. Voilà! 버터처럼 부드럽습니다.

이로 인해 깜박임이 발생합니다.

$('#banner').css('backgroundImage', 'url("slide_1.jpg")';

대신 다음을 수행하십시오.

$('#banner').attr('class', '.slide-1');

정의 된 클래스 포함 :

#banner { -webkit-transition: background-image .25s; }
.slide-1 { background-image: url("slide_1.jpg"); }
.slide-2 { background-image: url("slide_2.jpg"); }
— Mattwad
소스
0

Ember Animated Outlets, Phonegap 및 iOS 설정에 대해이 문제를 파악하는 데 많은 시간을 보냈습니다 .

간단하지만 CSS 애니메이션에 포함 된 각 최상위 상위 요소에 배경을 추가해야했습니다. 즉, 뷰에 배경이없는 요소가 없는지 확인하십시오.

내 설정은 각 템플릿에 대한 것이었고 세 가지 요소 모두에 배경색이 할당되었습니다.

<header></header> <body class="content"></body> <footer></footer>

— 케 노빅
소스
0

전환을 "all"에 적용하는 대신 정말로 필요한 것을 지정하십시오. 내 케이스의 깜박임을 제거했습니다.

— 실베스트르 루시아
소스
0

위의 모든 것을 시도했지만 여전히 Firefox 및 Chrome에서 주요 깜박임 문제가있었습니다. 나는 그것을 고쳤거나, 애니메이션 도중에 많은 리 페인트를 일으키는 박스-섀도우 트랜스 폼을 제거함으로써 적어도 허용 가능한 문제로 그것을 크게 줄였습니다. 나는 이것을 따라 내 필요에 맞게 수정했습니다.

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

— d1ch0t0my
소스
0

나를 위해, 사파리의 깜박임 문제 will-change: transform;는 애니메이션 요소를 제거 하여 해결되었습니다 .

또한 overflow: hidden;부모 에 추가하여이 문제를 해결할 수 있지만 이로 인해 모든 요소 transform: translateZ()가 효과가 없습니다.

— Mohsen.Khakbiz
소스
0

0이 아닌 실제 값을 사용해야했습니다.

.no-flick{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0.1px);
    transform: translateZ(0.1px); /* needs an actual value */
}

예:

<div class="foo no-flick"></div>

내가 읽은 내용 에서 깜박임은 하드웨어와 소프트웨어 렌더링 사이의 브라우저 전환으로 인해 발생합니다. 그리고 브라우저 제조업체는 하드웨어 렌더링을 강제하기 위해 예전 "translate3d (0,0,0)"을 알고 있다고 생각합니다. 따라서 이제 이러한 가짜 값을 무시할 수 있습니다.

=> 실제 값을 사용하면 사물이 "고착"될 수 있습니다.

어쨌든, 나를 위해 일했습니다.

— 단발
소스
0

기본 Android 웹 브라우저를 사용할 때 슬라이드 전환을 수행 할 때 깜박임이 발생했습니다.

다음 전환 CSS를 사용했습니다.

-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);

이 스레드에서 언급 된 해결 방법 중 어느 것도 문제 해결에 도움이되지 않았습니다. 마침내 해결책을 찾았습니다. 깜박임의 원인은 가능한 모든 전환을 수행하는 것을 의미 하는 all 키워드입니다. 변환 만 수행하도록 변경했으며 문제가 해결되었습니다.

-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);
— Jusid
소스
0

나를 위해 수정 한 것은 변환-번역 CSS 규칙의 할당을 지연시키는 것이 었습니다. 이 같은:

HTML :

<div class="animate-this loading"></div>

CSS :

.animate-this {
  &:not(.loading) {
    transform: -webkit-translate(50px);
    transform: translate(50px);
    transition: -webkit-transform 0.3s, transform 0.3s;
  }
}

자바 스크립트 (jQuery) :

$(document).ready(function(){
  window.setTimeout(function(){
    $('.animate-this').removeClass('loading');
  }, 250);
});

… 나를 -webkit-backface-visibility: hidden;위해 아무것도 하지 않았기 때문 입니다.

— WoodrowShigeru
소스
0

그래서 다른 사람이 제대로 작동하지 않는이 문제에 대한 해결책을 찾았습니다.

CSS :

.ios-animation-fixer {
  position: fixed;
  width: 100%;
  height: 10px;
  top: -10px;
  background-color: green;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

HTML :

<div class="ios-animation-fixer"></div>

그런 다음 z-index애니메이션 요소를> 1로 설정합니다 . 이것은 어떻게 든 iOS 장치가 애니메이션을 다르게 렌더링하도록 속이고 내 시나리오에서 깜박임을 방지합니다. 이 솔루션이 즉시 작동하지 않는 경우 Z- 색인 값을 조정하는 것이 도움이 될 수 있습니다.

— 콜린
소스
0

2019 업데이트

전환이 사용되는 요소에 이러한 규칙을 추가하여 깜박임을 켤 수 있습니다.

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

Safarai에서 나를 위해 일했습니다.

— 자유형 09
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.