iOS 9 Safari : 스크롤하는 동안 요소를 고정 위치로 변경하면 스크롤이 멈출 때까지 페인트되지 않습니다.

iOS 9 Safari : 스크롤하는 동안 요소를 고정 위치로 변경하면 스크롤이 멈출 때까지 페인트되지 않습니다.

---

나는 사이트를 개발하고 있으며 오히려 좋은 jQuery Sticky Kit 플러그인 을 활용하고 있습니다. 해당되는 경우 position속성을 로 전환 fixed하고 뒤로 전환하여 작동합니다 . 데스크톱에서 매우 원활하게 실행되며 모바일에서도 허용됩니다.

또는 적어도 예전에는. 아이폰 OS 9는 새로운 동작과 함께 제공 다음 경우 position요소의가에서 변경 static/ relative/ absolute로 fixed스크롤 애니메이션 요소가 스크롤이 정지 할 후까지 눈에 보이지 않는하게 진행된다. 이상하게도 반대의 변경 ( fixed다른 변경 )이 문제없이 수행됩니다.

작동 예는 플러그인의 홈페이지 에서 찾을 수 있습니다 . 검은 색 탐색 모음 ( "예제 참조")은 고정되어 있어야합니다. 원래는 static페이지 중간에 배치되었습니다. 아래로 fixed스크롤하면 스크롤이 멈출 때까지 및 (iOS 9에서) 사라집니다. 데스크톱 브라우저 및 iOS 8에서의 동작이 올 바릅니다.

저는 일반적인 CSS 해결 방법을 바라고있었습니다. 3D 변환 강제, 뒷면 가시성 비활성화 등, 모호한 독점 속성 ...하지만 아무것도 작동하지 않는 것 같습니다.

이제 작동 중이던 "고정 가능한"요소를 모두 잊으려고합니까?

---

나는 이와 동일한 문제가 있었고 이전의 "3D 변환 강제"트릭을 사용하여 문제를 해결할 수있었습니다. 위치를 전환 할 요소를 Transform 속성을 갖도록 설정하기 만하면됩니다 translate3d(0px,0px,0px). 위치 속성이 변경되기 전에이 작업이 수행되었는지 확인하십시오.

---

내가 올바르게 작동하는 유일한 해결책 은 고정 항목의 직계 하위 항목에 대한 Z- 색인 변환을 비활성화 하는 것입니다. 예 :

.is-sticky > * {
    -webkit-transform: translateZ(0);
}

---

추가 고정 요소로이 문제를 해결했습니다. 몇 가지 테스트 후 수정 된 첫 번째 요소가이 문제가 있음을 알게되었습니다. 두 번째, 세 번째 등은 iOS 기기에서 잘 작동합니다.

따라서 body openingtag 바로 뒤에 div.fixed-fix를 넣으십시오.

.fixed-fix {
    position:fixed;
    top:-1px; 
    height:1px; 
    width:100%; 
    background:white;
}

이제 작동합니다! 고정 - 수정 사업부는 반드시 그렇지 않으면 작동 실 거예요 때문에하는 backgroundColor로이 ...

---

jQuery Sticky Kit 및 기타 유사한 플러그인은 잘 코딩되어 있어도 iOS 9에서 이러한 종류의 동작을 표시하며 이와 같은 일이 발생하는 것은 이번이 처음이 아닙니다. 여기서 중요한 점은 Firefox Safari 및 Safari Mobile이 실험적인 기능을 지원한다는 것입니다.position: sticky; Google (Chromium)도 마찬가지지만 통합 문제로 인해 일시적으로 비활성화해야했습니다 . 여기에서 자세한 내용을 읽을 수 있습니다 . 내 생각 엔 곧position: sticky;CSS 사양의 일부이며 모든 주요 브라우저에서 지원되므로이 문제를 해결하는 가장 좋은 방법은 플러그인 대신 polyfill을 사용하는 것입니다. 물론 polyfill이 이러한 플러그인이 제공하는 모든 기능을 포함하지는 않습니다. 그럼에도 불구하고 많은 상황에서 polyfill을 사용하면 모든 주요 브라우저에서 지원하는 강력하고 효과적인 솔루션이 작동합니다. 제 생각에는 지금은 갈 길입니다. 나는 개인적으로 stickyfill을 사용 하지만 야생의 다른 polyfill이 트릭을 할 것이라고 확신합니다. 내가 말할 수있는 것은 플러그인 대신 polyfill을 사용하기 시작했기 때문에 브라우저 호환성 문제가 없었습니다.

---

혼합을 사용 하여 고정 요소에 추가 : @include transform(translate3d(0px,0px,0px))
CSS 사용 : translate3d(0px,0px,0px)

참고 URL : https://stackoverflow.com/questions/32875046/ios-9-safari-changing-an-element-to-fixed-position-while-scrolling-wont-paint