iOS Chrome обчислює неправильну висоту документа

Для того, щоб заповнити всю висоту сторінки, я використовую height: 100%;теги html та body, і вона працює чудово, поки браузер не буде закритий та не відкритий. (Я не використовую 100 ВГт через проблеми на мобільних пристроях 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 Rick з навігацією
• закрийте веб-переглядач і видаліть його з багатозадачної навігації: https://support.apple.com/en-us/HT201330
• знову відкрийте браузер (ви побачите, що навігація внизу перемістилася з "першого екрана", і тепер вам потрібно прокрутити її, щоб побачити її) скріншот css Rick без навігації

сторінка буде виправлена ​​сама в таких випадках:

• сторінки оновлення
• поверніть пристрій на краєвид
• відкрити та закрити навігацію браузера по вкладках
• закрити і знову відкрити браузер, не закриваючи його в багатозадачності nav

Чому це відбувається? Як я можу виправити таку поведінку?

Заздалегідь спасибі!

У мене була зовсім інша проблема, але я думаю, що розроблене нами рішення може допомогти і для вашої ситуації, оскільки ви згадали, що оновлення сторінки вирішило б це.

Тому у мене виникли проблеми з хромом на андроїді, де, якщо ви прокрутите дуже швидко (не рідкість на мобільних пристроях), деякі елементи не зможуть перефарбуватися. Усюди шукали рішення, але не знайшли нічого, що спрацювало б.

Нарешті я з’ясував робоче виправлення:

.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,99999 до 99,99998 було те, що працювало для мене, щоб зробити ефект невидимим.

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

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

Я спробував інші, трохи менш агресивні, задокументовані методи форсування перефарбовування. Як і додавання тексту на сторінку (невидимо) після зупинки прокрутки на 200 мс, тощо. Хоча нічого не вийшло, таким чином мій анімований на всю сторінку вічний злом.

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