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 )

Действия по воспроизведению:

• Откройте https://angelika94.github.io/rick/ в Google Chrome на iPhone (вы увидите, что навигация (Морти и Пиво) находится в нижней части страницы) скриншот css Рик с навигацией
• закройте браузер и удалите его из многозадачной навигации: https://support.apple.com/en-us/HT201330
• снова откройте браузер (вы увидите, что нижняя навигация переместилась с «первого экрана», и теперь вам нужно прокрутить, чтобы увидеть его) скриншот css Rick без навигации

страница будет исправлена ​​сама собой в следующих случаях:

• страница обновления
• повернуть устройство в ландшафт
• открывать и закрывать навигацию браузера по вкладкам
• закройте и снова откройте браузер, не закрывая его в многозадачной навигации

Почему это происходит? Как я могу исправить это поведение?

Заранее спасибо!

У меня была совсем другая проблема, но я думаю, что разработанное мною решение может сработать и в вашей ситуации, потому что вы упомянули, что обновление страницы исправит ее.

Так что у меня были проблемы с Chrome на Android, где, если вы прокручиваете очень быстро (нередко на мобильных устройствах), некоторые элементы не будут перерисованы / перекрашены. Всюду искал решение, но не мог найти ничего, что могло бы работать.

Наконец, я разобрался с исправлением:

.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 секунды, а не постоянно:

.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,9999 по 99,9998 было то, что помогло мне сделать эффект невидимым.

Слегка хакерское решение, которое может представлять проблемы с производительностью для очень длинных страниц, но, возможно, нет, потому что браузер должен отображать только то, что на экране. Страницы, на которых я использовал это, графически насыщены множеством сложных многослойных эффектов, и это, похоже, не оказывает заметного влияния на производительность.

Похоже, что многие мобильные браузеры имеют чрезмерно оптимизированный рендеринг, что приводит к причудливым сбоям с небольшим количеством хорошо документированных исправлений. Принудительное перекрашивание было единственным исправлением, которое я нашел.

Я пробовал другие, немного менее агрессивные, документированные методы форсирования перерисовок. Например, добавить некоторый текст на страницу (незаметно) после остановки прокрутки на 200 мс, и так далее. Ничего не сработало, таким образом, мой хак с анимацией всей страницы навсегда.

В вашем случае, некоторые из этих других хаков могут работать лучше. В этой статье описываются все различные вещи, которые вызывают перерисовки / перекомпоновки, чтобы вы могли попробовать сделать некоторые из этих вещей с помощью сценария.