O iOS Chrome calcula a altura incorreta do documento

Para preencher toda a altura da página, eu uso as height: 100%;tags html e body, e funciona bem até que um navegador seja fechado e reaberto. (Não uso 100vh devido a problemas em dispositivos móveis https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html )

Passos para reproduzir:

• Abra https://angelika94.github.io/rick/ no Google Chrome no iPhone (você verá que a navegação (Morty e Beer) está localizada na parte inferior da página): captura de tela do css Rick com navegação
• feche o navegador e remova-o da navegação multitarefa: https://support.apple.com/en-us/HT201330
• abra o navegador novamente (você verá que a navegação inferior saiu da "primeira tela" e agora você precisa rolar para vê-la) screenshot do css Rick sem navegação

a página será corrigida sozinha nesses casos:

• página de atualização
• gire o dispositivo para o modo paisagem
• abrir e fechar a navegação do navegador por guias
• feche e reabra o navegador sem fechá-lo na navegação multitarefa

Por que isso acontece? Como posso corrigir esse comportamento?

Agradeço antecipadamente!

Eu tinha um problema muito diferente, mas acho que a solução que resolvi pode funcionar também para a sua situação, porque você mencionou que atualizar a página o corrigia.

Então, eu tive problemas com o chrome no android, onde se você rolar muito rapidamente (não é incomum no celular), alguns elementos falharão ao serem re-pintados. Pesquisou em toda parte por uma solução, mas não conseguiu encontrar nada que funcionasse.

Finalmente, descobri uma correção de trabalho:

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

Portanto, o que isso faz é forçar a página a repintar continuamente em um ciclo de 3 segundos.

Talvez eu deva ajustá-lo para mudar apenas por uma fração de segundo a cada 2 segundos, em vez de continuamente:

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

Tentei zoom: 99.99999;para 1, mas certos elementos que escala a transição acima de 1 em alguns efeitos de foco iria mostrar a respiração zoom. Então 99.99999 a 99.99998 foi o que funcionou para mim para tornar o efeito invisível.

Solução ligeiramente hacky que pode apresentar problemas de desempenho para páginas muito longas, mas talvez não, porque o navegador deve renderizar apenas o que está na tela. As páginas em que usei isso são graficamente pesadas, com muitos efeitos complexos de várias camadas, e isso não parece ter um impacto perceptível no desempenho.

Parece que muitos navegadores móveis otimizam excessivamente a renderização, o que leva a falhas peculiares com poucas correções bem documentadas. Forçar repúdio foi a única solução de trabalho que encontrei.

Tentei outros métodos documentados, um pouco menos agressivos, de forçar repúdio. Como adicionar algum texto à página (invisivelmente) após a rolagem parar por 200ms, e assim por diante. Porém, nada funcionou, portanto, meu hack de animar a página inteira para sempre.

No seu caso, alguns desses outros hacks podem funcionar melhor. Este artigo descreve todas as várias coisas que causam repudes / refluxos para que você possa tentar fazer algumas dessas coisas via script.