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);
}

지금은 이것이 가장 "효율적인"솔루션은 아니지만 작동하는 유일한 솔루션이었습니다. 모바일 사파리는 화면을 벗어나거나 때로는 불규칙하게 렌더링되는 요소를 렌더링하지 않습니다.-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를 제공 할 필요가 없습니다.

시간 translate3d이 지나면 작동하지 않을 perspective수 있습니다.

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

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

overflow-y: auto;

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

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

회전 : -webkit-transform요소를 회전한다는 기존 선언으로 는 외관 문제를 해결하기에 충분하지 않을 수 있습니다 (예 -webkit-transform: rotate(-45deg):). 이 경우 -webkit-transform: translateZ(0px) rotateZ(-45deg)트릭으로 사용할 수 있습니다 ( 회전 Z ).

Z 인덱스 : 회전과 함께와 z-index같은 긍정적 인 속성을 정의 할 수 있습니다 z-index: 42. "회전"에 설명 된 위의 단계는 빈 경우에도 문제를 해결하기에 충분했습니다 translateZ(0px). 이 경우 Z 지수는 한 수 있지만 나는 의심 인해 사라지는하고 처음부터 다시 나타났다. 어쨌든 z-index: 42재산을 보관해야합니다- -webkit-transform: translateZ(42px)충분하지 않습니다.

이는 개발자가 직면 한 매우 일반적인 문제이며 주로로 Safari's정의 된 요소를 재생성하지 않는 속성 때문 position : fixed입니다.

따라서 위치 속성을 변경하거나 다른 답변에서 언급했듯이 일부 해킹을 적용해야합니다.

링크 1

링크 2

필자의 경우 (iOS Phonegap 앱) translate3d를 관련 자식 요소에 적용해도 문제가 해결되지 않았습니다. 스크롤 가능한 요소가 절대 위치로 설정되어 높이가 설정되지 않았으며 상단 및 하단 위치를 정의했습니다. 나를 위해 고친 것은 최소 높이 (100px)를 추가하는 것이 었습니다.

이전 버전의 Fancybox를 사용하는 것과 동일한 문제가있었습니다. v3으로 업그레이드하면 문제가 해결되거나 다음을 추가 할 수 있습니다.

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

Framework7 & Cordova 프로젝트 에서이 문제에 직면했습니다. 위의 모든 솔루션을 시도했습니다. 그들은 내 문제를 해결하지 못했습니다.

필자의 경우 같은 페이지에서 무한 회전 (변환)으로 10 개 이상의 CSS 애니메이션을 사용하고있었습니다. 애니메이션을 제거해야했습니다. 시각적 기능이 부족하여 이제는 괜찮습니다.

위의 해결 방법이 도움이되지 않으면 일부 애니메이션 제거가 시작될 수 있습니다.

-webkit-transform: translate3d(0, 0, 0);트릭은 나를 위해 작동하지 않았다. 제 경우에는 부모를 다음과 같이 설정했습니다.

// parent
height: 100vh;

로 변경 :

height: auto;
min-height: 100vh;

다른 사람이 같은 상황에 처한 경우 문제를 해결했습니다.

필자의 경우 CSS는 문제를 해결하지 못했습니다. jQuery를 다시 렌더링하는 동안 문제를 발견했습니다.

$("#myButton").html("text")

이 시도

$("#myButton").html("<span>text</span>")