iOS Chrome calcola l'altezza errata del documento

Per riempire l'intera altezza della pagina, io uso height: 100%;per i tag html e body, e funziona bene fino a quando un browser non verrà chiuso e riaperto. (Non uso 100vh a causa di problemi sui dispositivi mobili https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html )

Passaggi per riprodurre:

• Apri https://angelika94.github.io/rick/ in Google Chrome su iPhone (vedrai che la navigazione (Morty and Beer) è posizionata in fondo alla pagina) screenshot di css Rick con navigazione
• chiudere il browser e rimuoverlo dalla navigazione multitasking: https://support.apple.com/en-us/HT201330
• apri di nuovo il browser (vedrai che la navigazione in basso si è spostata dalla "prima schermata" e ora devi scorrere per vederla) screenshot di css Rick senza navigazione

la pagina verrà risolta da sola in questi casi:

• pagina di aggiornamento
• ruotare il dispositivo in orizzontale
• aprire e chiudere la navigazione del browser tramite schede
• chiudere e riaprire il browser senza chiuderlo nel navigatore multitasking

Perché succede? Come posso risolvere questo comportamento?

Grazie in anticipo!

Ho avuto un problema molto diverso, ma penso che la soluzione che ho elaborato potrebbe funzionare anche per la tua situazione, perché hai menzionato l'aggiornamento della pagina per risolverlo.

Quindi ho avuto problemi con Chrome su Android dove se scorressi molto rapidamente (non insolito su dispositivi mobili), alcuni elementi non sarebbero stati ri-dipinti. Cercato ovunque una soluzione, ma non sono riuscito a trovare nulla che potesse funzionare.

Alla fine, ho capito una soluzione funzionante:

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

Quindi ciò che fa è forzare la pagina a ridipingere continuamente su un ciclo di 3 secondi.

Forse dovrei modificarlo per spostare solo per una frazione di secondo ogni 2 secondi, anziché 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%;
  }
}

Ho provato zoom: 99.99999;a 1ma alcuni elementi che la transizione scala superiore a 1 su alcuni effetti al passaggio del mouse avrebbe mostrato il respiro zoom. Quindi da 99.99999 a 99.99998 è stato ciò che ha funzionato per me per rendere l'effetto invisibile.

Soluzione leggermente confusa che potrebbe presentare problemi di prestazioni per pagine molto lunghe, ma forse no, perché il browser dovrebbe visualizzare solo ciò che è sullo schermo. Le pagine su cui l'ho usato sono graficamente pesanti con molti effetti multistrato complessi e questo non sembra avere un impatto notevole sulle prestazioni.

Sembra che molti browser mobili abbiano un rendering eccessivamente ottimizzato, il che porta a stravaganti guasti con poche correzioni ben documentate. Forzare le ripetizioni è stata l'unica soluzione funzionante che ho trovato.

Ho provato altri metodi, leggermente meno aggressivi, documentati per forzare le ripetizioni. Come aggiungere un po 'di testo alla pagina (invisibilmente) dopo lo scorrimento si arresta per 200 ms e così via. Non ha funzionato nulla, quindi il mio hack per tutta la pagina animata per sempre.

Nel tuo caso, alcuni di quegli altri hack potrebbero funzionare meglio. Questo articolo delinea tutte le varie cose che causano ridisegni / ridisposizioni in modo da poter provare a fare alcune di queste cose tramite script.