iOS Chrome вычисляет неверную высоту документа

10

Чтобы заполнить всю высоту страницы, я использую 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 )

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

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

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

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

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

Anzhelika
источник
здесь нужна дополнительная информация Можете ли вы опубликовать пример кода? Остальная часть разметки css / html могла бы внести свой вклад в проблемы, а не только высота и платформа
Rachel Gallen
Любопытно - в вашем примере вы можете изменить .linksdiv на position: absolute. Меняет ли это поведение, которое вы видите? (У меня нет iphone для тестирования)
Slynagh
Вот ваш пример кода @Rachel Gallen.
Aaron3219
Также попробуйте перевести телефон в ландшафтный режим и снова вернуться. Это будет исправлено. Я думаю, что это проблема Chrome, а не HTML / CSS. Он отображается только в Chrome, и количество прокручиваемых вниз - это точное количество пикселей, которое получаются в нижней и верхней полосах браузера Chrome, если их объединить.
Aaron3219
@ Slynagh нет, это не так.
Aaron3219

Ответы:

3

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

Так что у меня были проблемы с 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 мс, и так далее. Ничего не сработало, таким образом, мой хак с анимацией всей страницы навсегда.

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

Veneseme Tyras
источник