iOS Chrome tính toán chiều cao sai của tài liệu

Để lấp đầy toàn bộ chiều cao của trang, tôi sử dụng height: 100%;cho thẻ html và thẻ body và nó hoạt động tốt cho đến khi trình duyệt được đóng và mở lại. (Tôi không sử dụng 100vh vì sự cố trên thiết bị di động https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browser.html )

Các bước để tái sản xuất:

• Mở https://angelika94.github.io/rick/ trong Google Chrome trên iPhone (bạn sẽ thấy điều hướng đó (Morty và Bia) được đặt ở dưới cùng của trang) ảnh chụp màn hình của css Rick với điều hướng
• đóng trình duyệt và xóa nó khỏi điều hướng đa nhiệm: https://support.apple.com/en-us/HT201330
• mở lại trình duyệt (bạn sẽ thấy điều hướng phía dưới di chuyển khỏi "màn hình đầu tiên" và bây giờ bạn cần cuộn để xem nó) ảnh chụp màn hình của css Rick mà không cần điều hướng

trang sẽ được sửa bởi chính nó trong những trường hợp sau:

• trang cập nhật
• xoay thiết bị sang ngang
• mở và đóng điều hướng của trình duyệt bằng các tab
• đóng và mở lại trình duyệt mà không đóng nó trong điều hướng đa nhiệm

Tại sao nó xảy ra? Làm thế nào tôi có thể sửa chữa hành vi này?

Cảm ơn bạn trước!

Tôi đã có một vấn đề rất khác, nhưng tôi nghĩ giải pháp tôi đã giải quyết cũng có thể phù hợp với tình huống của bạn, bởi vì bạn đề cập đến việc cập nhật trang sẽ khắc phục nó.

Vì vậy, tôi đã gặp vấn đề với chrome trên Android khi bạn cuộn rất nhanh (không phổ biến trên thiết bị di động), một số yếu tố sẽ không được vẽ lại. Tìm kiếm mọi nơi để tìm giải pháp nhưng không thể tìm thấy bất cứ thứ gì có thể hoạt động.

Cuối cùng, tôi đã tìm ra một cách khắc phục:

.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%; }}

Vì vậy, những gì nó làm là buộc trang phải liên tục sơn lại theo chu kỳ 3 giây.

Có lẽ tôi nên điều chỉnh nó để chỉ thay đổi trong một phần của giây sau mỗi 2 giây, thay vì liên tục:

.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%;
  }
}

Tôi cố gắng zoom: 99.99999;để 1nhưng một số yếu tố mà chuyển quy mô trên 1 vào một số hiệu ứng di chuột sẽ hiển thị thở zoom. Vì vậy, 99.99999 đến 99.99998 là những gì làm việc cho tôi để làm cho hiệu ứng trở nên vô hình.

Giải pháp hơi bị hack có thể gây ra sự cố về hiệu suất cho các trang rất dài, nhưng có thể không, vì trình duyệt chỉ nên hiển thị những gì trên màn hình. Các trang tôi đã sử dụng này rất nặng về mặt đồ họa với nhiều hiệu ứng đa lớp phức tạp và điều này dường như không có tác động hiệu suất đáng chú ý.

Có vẻ như nhiều trình duyệt di động có kết xuất được tối ưu hóa quá mức, dẫn đến những thất bại kỳ quặc với một vài sửa chữa được ghi chép tốt. Buộc lặp lại là sửa chữa làm việc duy nhất tôi tìm thấy.

Tôi đã thử các phương pháp khác, hơi ít tích cực hơn, ghi lại các phương pháp buộc phải sơn lại. Giống như thêm một số văn bản vào trang (vô hình) sau khi cuộn dừng lại trong 200ms, và như vậy. Mặc dù không có gì hoạt động, do đó, hack animate-the-toàn bộ trang của tôi mãi mãi.

Trong trường hợp của bạn, một số hack khác có thể hoạt động tốt hơn. Bài viết này phác thảo tất cả những điều khác nhau gây ra sự lặp lại / phản xạ để bạn có thể thử thực hiện một số điều này thông qua kịch bản.