iPad Safari 스크롤로 HTML 요소가 사라졌다가 다시 나타나면서 지연됨

iPad Safari 스크롤로 HTML 요소가 사라졌다가 다시 나타나면서 지연됨

저는 현재 HTML5와 jQuery for iPad Safari를 이용한 웹 애플리케이션을 개발하고 있습니다.스크롤 영역이 커서 아래로 스크롤할 때 화면 밖에 있는 요소가 지연된 후 나타나는 문제가 발생했습니다.

즉, 화면 밖에 있는 이미지 행(또는 기울기가 있는 div)이 있는 경우 아래로 스크롤(또는 위로 스크롤)할 때 요소가 화면에 나타날 것으로 예상되는 동작입니다.

그러나 화면에서 손가락을 떼고 스크롤러가 모든 애니메이션을 완료할 때까지 요소가 나타나지 않습니다.

이것은 저에게 매우 눈에 띄는 문제를 야기하고 있습니다. 비록 그렇지는 않지만 전체를 바삭바삭하게 보이게 합니다.iPad Safari가 메모리를 절약하기 위해 무언가를 하려고 하는 것 같습니다.제가 이 삐걱거리는 것을 막을 수 있는 방법이 있을까요?

또한 iPad Safari가 실제로 하려는 것은 무엇입니까?

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

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

특히, 당신은 이것이 필요할 것입니다. 그것을 가지고 있는 어린이 요소들.position:relative;선언(또는 모든 하위 요소에 대해 수행하기만 하면 됩니다.

확실한 해결책은 아니지만 대부분의 경우 상당히 성공적입니다.

Hat tip: iOS 5 네이티브 스크롤링 – Grins & Gotchas

저는 전에 translate3d를 사용하고 있었습니다.그것은 원치 않는 결과를 낳았습니다.기본적으로, 제가 그들과 상호작용할 때까지 화면 밖에 있는 요소들을 렌더링하지 않고 잘라냅니다.그래서 기본적으로, 풍경 방향에서, 제 사이트의 절반이 화면 밖에 표시되지 않았습니다.이것은 제가 곤경에 처했던 아이패드 웹 애플리케이션입니다.

상대적으로 위치한 요소에 translate3d를 적용하면 해당 요소의 문제가 해결되었지만 다른 요소는 화면 밖에서 렌더링을 중지했습니다.페이지를 다시 로드하지 않는 한 (예술 작품)과 상호 작용할 수 없는 요소는 다시 렌더링되지 않습니다.

완벽한 솔루션:

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

비록 이것이 가장 "효율적인" 해결책은 아닐지라도, 효과가 있는 유일한 해결책이었습니다.는 Mobile Safari를 사용할 때 를 렌더링하지 불규칙하게.-webkit-overflow-scrolling: touch해당 스크롤로 인해 화면 밖으로 나갈 수 있는 다른 모든 요소에 번역 3d가 적용되지 않는 한 스크롤 후 해당 요소는 잘립니다.

_{(이것이 제 질문에 대한 완전한 대답입니다.저는 원래 콜린 윌리엄스의 대답을 정답으로 표시했는데, 그것이 제가 완전한 해결책에 도달하는 데 도움이 되었기 때문입니다.커뮤니티 회원인 @Slip D.Thompson은 제가 질문한 지 약 2.5년 후에 제 질문을 편집했고 제가 SO의 Q&A 형식을 남용하고 있다고 말했습니다.그는 이것을 따로따로 답으로 올리라고도 했습니다.@콜린 윌리엄스, 감사합니다!답변과 당신이 링크한 기사는 CSS로 무언가를 시도할 수 있는 단서를 주었습니다.다시 한번 감사드립니다. 그리고 이것이 잃어버린 다른 영혼에게 도움이 되기를 바랍니다.이것은 확실히 저에게 큰 도움이 되었습니다!)}

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;

번역 3d가 작동하지 않을 때는 원근법을 추가합니다.항상 나에게 효과가 있습니다.

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

하드웨어 가속 CSS로 사이트 성능 향상

추가하기-webkit-transform: translate3d(0,0,0)저한테는 전혀 효과가 없는 것 같아요.

이 속성을 동적으로 적용합니다.를 들어,때, 는 예들어스, 가롤될때크다, 설합니정나는을 설정합니다.-webkit-transform: translate3d(0,0,0)요소에 관하여그리고 나서 잠시 지체한 후에, 저는 이 속성을 재설정했습니다. 즉,-webkit-transform: none이 접근법은 효과가 있는 것 같습니다.

_{콜린 윌리엄스 씨, 저를 올바른 방향으로 인도해 주셔서 감사합니다.}

iOS 7에서 iscroll 4.2.5에서도 같은 문제가 있었습니다.스크롤 요소 전체가 사라집니다.

추가하려고 했습니다.translate3d(0,0,0)했습니다.문제는 해결되었지만 iscroll "snap" 효과는 비활성화되었습니다.

솔루션은 다음과 같이 제공됩니다."position:relative; z-index:1000;display:block"스크롤 요소를 포함하는 전체 컨테이너에 대한 CSS 속성이며 하위 요소에 translate3d를 제공할 필요가 없습니다.

이전 버전의 팬시박스를 사용하는 경우에도 동일한 문제가 있었습니다.

v3로 업그레이드하면 문제가 해결되거나 다음을 추가할 수 있습니다.

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

에 간에시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의 특성 때문입니다.position : fixed.

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

iOS에서 위치 고정 및 스크롤 관련 문제

스크롤하는 동안 iOS Safari에서 고정된 위치로 변경

저의 경우(iOS PhoneGap 앱)는 상대적인 자식 요소에 translate3d를 적용해도 문제가 해결되지 않았습니다.스크롤 가능한 요소가 완전히 배치되어 있고 위쪽과 아래쪽 위치를 정의하고 있었기 때문에 높이가 설정되어 있지 않았습니다.

최소 높이(100픽셀)를 추가하는 것이 저를 위해 해결되었습니다.

저는 Framework7과 코르도바 프로젝트에서 이 문제에 직면했습니다.저는 위의 모든 해결책을 시도했습니다.그들은 나의 문제를 해결하지 못했습니다.

저의 경우 무한 회전(변환)으로 한 페이지에 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>")

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