iPhone WebKit CSS 애니메이션으로 인해 깜박임 발생
이것은 아이폰 사이트입니다 : http://www.thevisionairegroup.com/projects/accessorizer/site/
"지금 플레이"를 클릭하면 게임이 시작됩니다. 총이 스크롤됩니다. 지갑과 액세서리를 위아래로 스크롤 할 수 있습니다. 손을 떼면 제자리에 끼워지는 것을 볼 수 있습니다. 스냅이 발생하는 것처럼 깜박임이 발생합니다. 내가 사용하는 유일한 웹킷 애니메이션은 다음과 같습니다.
'-webkit-transition': 'none'
'-webkit-transition': 'all 0.2s ease-out'
'-webkit-transform': 'translate(XXpx, XXpx)'
애니메이션을 적용할지 여부에 따라 첫 번째 또는 두 번째 전환 중 하나를 선택하고 변형은 내가 사물을 이동하는 유일한 방법입니다.
하지만 가장 큰 문제는 "항목 일치"를 클릭 한 다음 "다시 재생"을 클릭하는 것입니다. 총이 움직이면 액세서리 / 지갑의 전체 배경이 흰색으로 변하는 것을 볼 수 있습니다. 누군가가 왜 이런 일이 발생하는지에 대한 통찰력으로 나를 발산 할 수 있습니까 ??
내가 추가 -webkit-backface-visiblity했고 대부분 도움이되었지만 페이지를 새로 고침 한 후에도 여전히 초기 깜박임이 발생했습니다. 를 추가했을 때 -webkit-perspective: 1000깜박임이 전혀 없었습니다.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
이것을 시도하면 도움이 될 것입니다.
#game {
-webkit-backface-visibility: hidden;
}
body {-webkit-transform:translate3d(0,0,0);}
제 사건에 대한 실제 답은 여기에 있습니다. 누군가와 가까웠습니다 : -webkit-backface-visibility : hidden; 그러나 진짜 대답은 -webkit-backface-visibility : hidden; 상위 div에 추가해야합니다 .
"깜박이는"CSS 전환에도 문제가있었습니다. 문제의 애니메이션은 화면 밖에서 미끄러지는 메뉴 였고 애니메이션이 끝나 자마자 전체 메뉴가 깜박이거나 깜박 거 렸습니다.
결과적으로 이것은 실제 iOS 기능인 "탭 강조 표시" 로 인해 발생했습니다. 어떤 이유로 CSS 애니메이션이 완료된 후 (즉, 실제 탭 후) 시작되어 요소 만 대신 전체 메뉴를 강조 표시했습니다. 도청되었습니다. 여기에 설명 된대로 탭 강조 표시를 완전히 비활성화하여 문제를 "수정"했습니다 .
-webkit-tap-highlight-color: rgba(0,0,0,0);
Michael의 대답 -webkit-backface-visibility: hidden; 은 우리가이 문제에 부딪혔을 때 효과가있었습니다. 우리는 한 translateZ(0px)우리에 <body>아이폰 OS 3.1.3 및 이전 방지하기 위해 태그 IFRAME경계 버그 및 플리커에 anims를 일으켰습니다. -webkit-backface-visibility: hidden;애니메이션 된 각 요소에 추가 하면 깜박임이 수정되었습니다! 생명의 은인.
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
나는 div에 호버 상태가있을 때 CSS 또는 js가 첨부되어 있지 않아도 페이지가 깜박입니다. 다른 사람에게 도움이 될 수도 있습니다.
뒷면 가시성이 작동하지 않는 사람이 있다면 애니메이션 요소에 이미있는 속성을 볼 수 있습니다. 우리 overflow-y: scroll는 absolute또는 fixed배치 된 요소가 iOS에서 큰 깜박임을 유발 하는 것을 발견했습니다 .
간단히 제거 overflow-y: scroll하면 해결되었습니다.
비록 내가했다 -webkit-transform-style: preserve-3d;및 -webkit-backface-visibility: hidden깜박임은 여전히 일어나고 있었다.
제 경우에는 원인이 z-index. 활성 요소에서 증가시키는 것이 도움이되었습니다.
여기에 새로운 솔루션이 있습니다. 나는 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"); }
이 해결책을 시도하십시오 . Phonegap + jQM 1.4.0 에서 나를 위해 작동합니다 .
이것을 변경 <meta name="viewport" content="width=device-width, initial-scale=1">
대신에 :
<meta name="viewport" content="width=device-width, user-scalable=no" />
자세한 내용은 http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in
Ember Animated Outlets, Phonegap 및 iOS 설정 에서이 문제를 파악하는 데 많은 시간을 보냈습니다 .
간단하지만 CSS 애니메이션에 포함 된 각 최상위 상위 요소에 배경을 추가해야했습니다. 즉, 뷰에 배경이없는 요소가 없어야합니다.
내 설정은 각 템플릿에 대한 것이었고 세 가지 요소 모두에 배경색이 할당되었습니다.
<header></header> <body class="content"></body> <footer></footer>
전환을 "all"에 적용하는 대신 정말로 필요한 것을 지정하십시오. 내 케이스의 깜박임을 제거했습니다.
위의 모든 것을 시도했지만 여전히 Firefox 및 Chrome에서 주요 깜박임 문제가있었습니다. 나는 그것을 고쳤거나, 애니메이션 도중에 많은 리 페인트를 유발하는 박스-섀도우 트랜스 폼을 제거함으로써 허용 가능한 문제로 최소한 크게 줄였습니다. 나는 이것을 따라 내 필요에 맞게 수정했습니다.
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
나를 위해, 사파리의 깜박임 문제 will-change: transform;는 애니메이션 요소를 제거 하여 해결되었습니다 .
또한 overflow: hidden;부모 에 추가하여이 문제를 해결할 수 있지만 이로 인해 모든 요소 transform: translateZ()가 효과가 없습니다.
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)"을 알고 있다고 생각합니다. 따라서 이제 이러한 가짜 값을 무시할 수 있습니다.
=> 실제 값을 사용하면 사물이 "고착"될 수 있습니다.
어쨌든, 나를 위해 일했습니다.
기본 Android 웹 브라우저를 사용할 때 슬라이드 전환을 수행 할 때 깜박임이 발생했습니다.
다음 전환 CSS를 사용했습니다.
-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);
None of the workarounds mentioned in this thread have helped to solve the issue. Finally I've found the solution. The source of flickering is the all keyword which means to perform all possible transitions. I've changed it to perform only transformation and the issue has been solved:
-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);
What fixed it for me was to delay the assignment of the transform-translate CSS rule. Something like this:
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;
}
}
JavaScript (jQuery):
$(document).ready(function(){
window.setTimeout(function(){
$('.animate-this').removeClass('loading');
}, 250);
});
… Because -webkit-backface-visibility: hidden; didn't do anything for me.
So I found a fix for this issue where none others worked properly.
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>
Then set the z-index for your animated element to be > 1. This somehow tricks iOS devices into rendering the animation differently, and avoids the flicker in my scenario. Adjusting z-index values may be helpful if this solution doesn't work out of the gate.
참고URL : https://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
'Programing' 카테고리의 다른 글
| Xcode 5-DVTPlugInCompatibilityUUID에 필요한 플러그인이 없습니까? (0) | 2020.10.09 |
|---|---|
| Git Bash : 인증 에이전트에 대한 연결을 열 수 없습니다. (0) | 2020.10.09 |
| 텍스트 영역 스크롤 막대를 기본값으로 아래쪽으로 설정하려면 어떻게합니까? (0) | 2020.10.09 |
| 격리 범위가있는 지시문의 템플릿에서 $ rootScope에 액세스 할 수없는 이유는 무엇입니까? (0) | 2020.10.09 |
| 포착되지 않은 오류 : 모듈이 자체 등록되지 않았습니다. (0) | 2020.10.09 |