iPad Safari 스크롤로 인해 HTML 요소가 사라지고 지연되어 다시 나타납니다.

iPad Safari 스크롤로 인해 HTML 요소가 사라지고 지연되어 다시 나타납니다.

---

현재 iPad Safari 용 html5 및 jQuery를 사용하여 웹앱을 개발 중입니다. 큰 스크롤 영역으로 인해 화면 밖의 요소가 아래로 스크롤 할 때 지연 후에 표시되는 문제가 발생합니다.

내가 의미하는 것은 오프 스크린 인 이미지 행 (또는 그라디언트가있는 div)이있는 경우 아래로 스크롤 할 때 요소가 화면에 표시 되는 것으로 예상되는 동작 입니다. 나는 그것을 스크롤하고있다.

그러나 내가보고있는 것은 화면에서 손가락을 떼고 스크롤러가 모든 애니메이션을 마칠 때까지 요소 가 나타나지 않는다는 것 입니다.

이것은 나에게 매우 눈에 띄는 문제를 일으키고 있지만 모든 것이 고르지 않게 보이게합니다. iPad Safari가 메모리 절약을 위해 무언가를 시도하고 있다고 생각합니다. 이 고르지 못한 일이 발생하는 것을 막을 수있는 방법이 있습니까? 또한 아이 패드 사파리가 실제로 무엇을하는지 밝힐 수 있다면 감사하겠습니다.

---

하드웨어 가속을보다 효과적으로 사용하려면 브라우저를 속 여야합니다. 빈 3D 변환으로이 작업을 수행 할 수 있습니다.

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

특히, position:relative;선언 이있는 자식 요소에 필요합니다 (또는 모든 자식 요소에 적용).

보장 된 수정은 아니지만 대부분의 경우 상당히 성공적입니다.

모자 팁 : https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

---

이것은 내 질문에 대한 완전한 대답입니다. 원래 @Colin Williams의 답변을 정답으로 표시했습니다. 완벽한 솔루션을 얻는 데 도움이되었습니다. @Slipp D. Thompson 커뮤니티 회원이 약 2.5 년 동안 질문 한 후 내 질문을 편집하고 SO의 Q & A 형식을 남용한다고 말했습니다. 그는 또한 이것을 별도로 답변으로 게시하도록 지시했습니다. 내 문제를 해결 한 완전한 대답은 다음과 같습니다.

@Colin Williams, 감사합니다! 귀하의 답변과 연결 된 기사는 CSS로 무언가를 시도해 볼 수있는 리드를주었습니다.

그래서 전에 translate3d를 사용하고있었습니다. 원치 않는 결과가 나왔습니다. 기본적으로, 내가 상호 작용할 때까지 화면에서 벗어난 요소를 잘라 내지 않고 렌더링하지 않습니다. 따라서 기본적으로 가로 방향에서는 화면을 벗어난 내 사이트의 절반이 표시되지 않았습니다. 이것은 내가 고쳤 기 때문에 iPad 웹 응용 프로그램입니다.

Translate3d를 상대적으로 배치 된 요소에 적용하면 해당 요소의 문제가 해결되었지만 다른 요소는 화면을 벗어나면 렌더링을 중지했습니다. 페이지를 새로 고침하지 않으면 (아트 워크)와 상호 작용할 수없는 요소는 다시 렌더링되지 않습니다.

완벽한 솔루션 :

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

지금은 이것이 가장 "효율적인"솔루션은 아니지만 작동하는 유일한 솔루션이었습니다. Mobile Safari는를 사용할 때 오프 스크린 요소를 렌더링하지 않거나 때로는 불규칙하게 렌더링하지 않습니다 -webkit-overflow-scrolling: touch. 화면 이동으로 인해 화면에서 벗어날 수있는 다른 모든 요소에 translate3d를 적용하지 않으면 스크롤 후 해당 요소가 잘립니다.

다시 한 번 감사드립니다. 이것이 다른 잃어버린 영혼을 돕기를 바랍니다. 이것은 확실히 큰 시간을 도왔습니다!

---

html 이외의 모든 요소를 ​​타겟팅하면 *:not(html)필자의 경우 다른 요소에 문제가 발생했습니다. 스택 컨텍스트를 수정하여 일부 z- 색인이 깨졌습니다.

올바른 요소 를 타겟팅 하고 적용 -webkit-transform: translate3d(0,0,0)하는 것이 좋습니다.

편집 : 때로는 translate3D(0,0,0)작동하지 않습니다. 올바른 요소를 대상으로 다음 방법을 사용할 수 있습니다.

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

---

translate3d가 작동하지 않으면 원근감을 추가하십시오. 그것은 항상 나를 위해 작동

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

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

---

-webkit-transform: translate3d(0,0,0)요소에 정적으로 추가 해도 효과가 없습니다.

이 속성을 동적으로 적용합니다. 예를 들어, 페이지가 스크롤 될 때 -webkit-transform: translate3d(0,0,0)요소를 설정 했습니다. 그런 다음 짧은 지연 후에이 속성을 재설정합니다. 즉, -webkit-transform: none이 접근법은 효과가있는 것 같습니다.

@Colin Williams에게 올바른 방향으로 나를 찾아 주셔서 감사합니다.

---

ios7에서 iscroll 4.2.5와 동일한 문제가있었습니다. 스크롤 요소 전체가 사라집니다. translate3d(0,0,0)여기에 제안 된대로 추가하려고 시도했지만 문제가 해결되었지만 iscroll "스냅"효과가 비활성화되었습니다. 솔루션 "position:relative; z-index:1000;display:block"에는 스크롤 요소를 보유하는 전체 컨테이너에 CSS 속성을 제공하는 것과 함께 자식 요소에 translate3d를 제공 할 필요가 없습니다.

---

나는 이것이 방금 이것을 해결했다고 확신한다.

overflow-y: auto;

(아마도 overflow: auto;필요에 따라 작동 할 것입니다.)

---

경우가있는 회전 및인가 / 또는 Z 인덱스가 사용된다.

Rotation: An existing declaration of -webkit-transform to rotate an element might not be enough to tackle the appearance problem as well (like -webkit-transform: rotate(-45deg)). In this case you can use -webkit-transform: translateZ(0px) rotateZ(-45deg) as a trick (mind the rotateZ).

Z index: Together with the rotation you might define a positive z-index property, like z-index: 42. The above steps described under "Rotation" were in my case enough to resolve the issue, even with the empty translateZ(0px). I suspect though that the Z index in this case may have caused the disappearing and reappearing in the first place. In any case the z-index: 42 property needs to be kept -- -webkit-transform: translateZ(42px) only is not enough.

---

This is a very common problem faced by developers and that is mainly due to Safari's property of not recreating elements defined as position : fixed.

So either change the position property or some hack needs to be applied as mentioned in other answers.

Link1

Link2

---

In my case (an iOS Phonegap app), applying translate3d to relative child elements did not resolve the issue. My scrollable element didn't have a set height as it was absolutely positioned and I was defining the top and bottom positions. What fixed it for me was adding a min-height (of 100px).

---

I had the same issue using an older version of Fancybox. Upgrading to v3 will solve your problem OR you can just add:

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

---

At time translate3d may not work, in those cases perspective can be used

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

---

I faced this problem in a Framework7 & Cordova project. I tried all the solutions above. They did not solve my problem.

In my case, I was using 10+ css animations on the same page with infinite rotation (transform). I had to remove the animations. It is ok now with the lack of some visual features.

If the solutions above do not help you, you may start eliminating some animations.

---

the -webkit-transform: translate3d(0, 0, 0); trick didn't work for me. In my case I had set a parent to:

// parent
height: 100vh;

Changing that to:

height: auto;
min-height: 100vh;

Solved the issue in case someone else is facing the same situation.

참고URL : https://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela