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);
의 대답은 . -webkit-backface-visibility: hidden;우리가 이 문제에 부딪혔을 때 효과가 있었습니다.우리는 있었습니다.translateZ(0px)우리 쪽에서<body> 버전의 iOS 3.1. 태그입니다.IFRAME경계 벌레와 그것은 동물들이 깜박거리게 만들었습니다. 추가하기-webkit-backface-visibility: hidden;우리가 애니메이션으로 만든 각 요소에 깜박임을 수정했습니다!생명의 은인.
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
나는 디브에 호버 상태가 있을 때, 내가 CSS나 Js가 부착되어 있지 않더라도 페이지가 깜박일 것이라는 것을 알아차렸습니다. 아마도 이것은 다른 사람에게 도움이 될 것입니다.
뒷면 가시성이 작동하지 않는 경우 애니메이션 요소에 이미 있는 속성을 볼 수 있습니다.우리는 다음과 같은 것을 발견했습니다.overflow-y: scrollabsolute또는fixed위치 요소로 인해 iOS에서 큰 깜박임이 발생했습니다.
간히제를 제거합니다.overflow-y: scroll고쳤습니다.
비록 내가 가지고 있었지만,-webkit-transform-style: preserve-3d;그리고.-webkit-backface-visibility: hidden깜박임은 여전히 발생하고 있었습니다.
나의 경우 원인은z-index활성 요소에서 증가시키는 것이 도움이 되었습니다.
저는 위의 모든 것을 시도했지만 파이어폭스와 크롬에서 여전히 큰 깜박임 문제가 있었습니다.저는 그것을 고쳤거나, 적어도 애니메이션 중에 많은 페인트를 유발하는 박스섀도 변형을 제거함으로써 허용 가능한 문제로 크게 줄였습니다.이에 따라 필요에 따라 수정했습니다.
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
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)"를 알고 있습니다. 그래서 그들은 이제 이러한 가짜 값을 무시하고 있을지도 모릅니다.
=> 실제 값을 사용하면 물건이 "붙을" 수 있습니다.
어쨌든, 저를 위해 일했습니다.
그래서 저는 다른 사람들이 제대로 작동하지 않는 이 문제에 대한 해결책을 찾았습니다.
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-index 값을 조정하는 것이 유용할 수 있습니다.
저는 오랫동안 이와 유사한 문제를 해결하기 위해 노력해 왔으며, 이 스레드의 코멘트가 저에게 중요한 열쇠였기 때문에 다른 사람들을 위해 강조하고 있습니다.
저는 사실 웹킷-백페이스-가시성을 추가해야 했습니다. 숨겨진; 부모 디비, 애니메이션 디비, 애니메이션 디비의 아이들에게.일단 그렇게 하면 완벽하게 작동합니다.매트 슈틸러 2013년 3월 12일 13:36
변환을 사용할 때 흰색 플래시가 끔찍합니다. 변환 3d를 변환하여 div의 위치를 변경합니다. 변환에 전환 기간을 추가하고 div를 너무 멀리 이동하면 iOS 웹킷 브라우저(단!)에서 화면이 흰색으로 깜박입니다.그것은 저를 미치게 했고, 저는 해결책을 찾기 위해 이와 같은 실타래를 샅샅이 뒤졌습니다. 그리고 그것을 막기 위해 제가 할 수 있는 모든 것을 시도했습니다.다음은 최종적으로 성공한 방법입니다.
#board_container * { /* asterisk(*) => board container and all its descendants */
/*
attempt to stop iOS webkit flash when board is panned
to its edge... is it finally working?!?
*/
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}저는 이전에 제 #board div와 포장지 #board_container에 무언가를 적용하려고 했지만, 그 안에 몇 가지 수준의 요소가 더 포함되어 있었고, 모두 흰색 플래시가 사라지기 위한 치료가 필요했던 것으로 보입니다.제가 놓친 것은 CSS의 간단한 별표였습니다.
#board_building * {
왜 iOS 웹킷 브라우저에서만 그런 일이 발생했는지, 그리고 보드 디비가 어느 정도 이상으로 번역되었을 때에만...
여기 새로운 해결책이 있습니다.저는 jQuery로 배경 이미지를 설정하고 있었는데, 어떤 3D 렌더링 트릭도 작동하지 않았습니다.그래서 대신 클래스를 사용하여 속성을 정의하려고 했습니다.보일라! 버터처럼 부드럽게.
이 경우 깜박임이 발생합니다.
$('#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
저는 엠버 애니메이션 아울렛, 폰갭, iOS 설정을 위해 이 문제를 해결하기 위해 많은 시간을 보냈습니다.
단순하지만, 저는 CSS 애니메이션에 포함된 각 최상위 상위 요소에 배경을 추가해야 했습니다.즉, 보기의 어느 지점에도 배경이 없는 요소가 있는지 확인합니다.
각 템플릿에 대한 설정은 다음과 같았고 세 가지 요소 모두에 배경색이 할당되었습니다.
<header></header> <body class="content"></body> <footer></footer>
"모든" 전환을 적용하는 대신 필요한 전환만 지정하면 됩니다.그것은 제 케이스의 깜박임을 제거했습니다.
저는 사파리에서 깜박이는 문제를 제거함으로써 해결했습니다.will-change: transform;애니메이션 요소로.
또한 추가함으로써 이 문제를 해결할 수 있었습니다.overflow: hidden;부모에게, 하지만 이것과 함께, 모든 요소들은.transform: translateZ()효력이 없어졌습니다.
기본 Android 웹 브라우저를 사용할 때 슬라이드 전환을 수행할 때 깜박임이 발생한 적이 있습니다.
저는 다음과 같은 전환 CSS를 사용했습니다.
-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);
이 스레드에서 언급한 해결 방법 중 문제 해결에 도움이 되는 것은 없습니다.드디어 해결책을 찾았습니다.깜박임의 원인은 모든 가능한 전환을 수행하는 all 키워드입니다.변환만 수행하도록 변경하여 문제가 해결되었습니다.
-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,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;
}
}
JavaScript(jQuery):
$(document).ready(function(){
window.setTimeout(function(){
$('.animate-this').removeClass('loading');
}, 250);
});
ㅠㅠㅠㅠ-webkit-backface-visibility: hidden;아무 것도 해주지 않았어요
2019년 업데이트
이러한 규칙을 전환에 사용되는 요소에 추가하기만 하면 깜박임을 설정할 수 있습니다.
-webkit-transform: translate3d(0, 0, 0);
사파라이에서 저를 위해 일했습니다.
언급URL : https://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
'programing' 카테고리의 다른 글
| 크롬의 요소 검사기에서 CSS 규칙이 회색으로 표시되는 것은 무엇을 의미합니까? (0) | 2023.07.29 |
|---|---|
| URLWithString: nil을 반환합니다. (0) | 2023.07.29 |
| ASP.NET MVC 3 - 요청한 항목을 찾을 수 없습니다.Net Framework 데이터 공급자 (0) | 2023.07.29 |
| 숫자의 형식을 지정하는 방법? (0) | 2023.07.29 |
| 확장에서 c++ b를 로드하지 못했습니다. (0) | 2023.07.24 |