iOS Chrome이 문서의 잘못된 높이를 계산합니다

페이지의 전체 높이를 채우기 height: 100%;위해 html 및 body 태그에 사용 하며 브라우저를 닫았다가 다시 열 때까지 잘 작동합니다. (나는 모바일 장치의 문제로 인해 100vh를 사용하지 않습니다 https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html )

재현 단계 :

• iPhone의 Chrome에서 https://angelika94.github.io/rick/ 을 엽니 다 (탐색 이 포함 된 CSS Rick의 스크린 샷 ( 페이지 하단에 탐색 (Morty and Beer)이 있음)이 표시됨)
• 브라우저를 닫고 멀티 태스킹 탐색에서 제거하십시오 : https://support.apple.com/en-us/HT201330
• 브라우저를 다시 엽니 다 (아래 탐색이 "첫 번째 화면"에서 이동 한 것을 보았으므로 이제 스크롤해야합니다). 탐색없이 CSS Rick의 스크린 샷

이 경우 페이지 자체가 수정됩니다.

• 업데이트 페이지
• 장치를 가로로 회전
• 탭별로 브라우저 탐색 열기 및 닫기
• 멀티 태스킹 탐색에서 브라우저를 닫지 않고 닫고 다시 열기

왜 그런가요? 이 동작을 어떻게 해결할 수 있습니까?

미리 감사드립니다!

매우 다른 문제가 있었지만 페이지를 업데이트하면 문제가 해결 될 것이라고 언급했기 때문에 내가 해결 한 솔루션이 귀하의 상황에서도 효과가 있다고 생각합니다.

그래서 안드로이드에서 크롬에 문제가있어 매우 빠르게 스크롤하면 (모바일에서는 드문 경우) 일부 요소가 다시 페인트되지 않습니다. 모든 곳에서 솔루션을 검색했지만 작동하는 것을 찾을 수 없습니다.

마지막으로 작업 수정을 알아 냈습니다.

.pagewrap {
  transform: translateZ(0);
  animation-name: 'repaint';
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

@keyframes repaint {from { zoom: 99.99999%; } to { zoom: 99.99998%; }}

이것이하는 일은 페이지가 3 초 주기로 계속 다시 그려 지도록하는 것입니다.

어쩌면 나는 연속적으로 대신 2 초마다 1 초 동안 만 이동하도록 조정해야 할 수도 있습니다.

.pagewrap {
  transform: translateZ(0);
  animation-name: 'repaint';
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

@keyframes repaint {
  0% {
    zoom: 99.99999%;
  }
  99% {
    zoom: 99.99999%;
  }
  100% {
    zoom: 99.99998%;
  }
}

나는 노력 zoom: 99.99999;을 1하지만 줌 호흡을 보여줄 것입니다 일부 호버 효과에서 1 위의 규모를 전환하는 것이 특정 요소. 99.99999에서 99.99998까지 효과가 보이지 않게되었습니다.

브라우저가 화면에 표시되는 내용 만 렌더링해야하기 때문에 매우 긴 페이지에서 성능 문제가 발생할 수있는 약간 해키 솔루션입니다. 내가 사용한 페이지는 그래픽으로 무겁고 복잡한 다중 레이어 효과가 많으며 성능에 큰 영향을 미치지 않는 것 같습니다.

많은 모바일 브라우저가 렌더링을 과도하게 최적화 한 것처럼 보이며 문서화가 잘되어 있지 않은 기발한 실패로 이어집니다. 다시 칠하는 것은 내가 찾은 유일한 해결책이었습니다.

나는 약간 덜 공격적이고 문서화 된 다시 그리기 강제 방법을 시도했습니다. 200ms 동안 스크롤이 멈춘 후 페이지에 텍스트를 추가하는 것처럼 (보이지 않음). 그래도 아무것도 작동하지 않았으므로 전체 페이지 애니메이션은 영원히 해킹되었습니다.

귀하의 경우 다른 해킹 중 일부가 더 잘 작동 할 수 있습니다. 이 기사에서는 다시 그리기 / 리플 로우를 유발하는 모든 다양한 사항에 대해 간략하게 설명하므로 스크립트를 통해 이러한 작업을 수행해 볼 수 있습니다.