Le comportement de redimensionnement de la barre d'URL change dans Chrome sur Android à partir de la version 56. Quelques informations sur les Super Stickers :
Les longueurs définies en unités de fenêtre d'affichage (par exemple, vh) ne seront pas redimensionnées en fonction de l'affichage ou de la masquage de la barre d'URL. Au lieu de cela, les unités vh seront dimensionnées en fonction de la hauteur de la vue d'ensemble, comme si la barre d'URL était toujours masquée. Autrement dit, les unités vh seront dimensionnées en fonction de la "vue la plus grande possible". Cela signifie que 100vh sera plus grand que la hauteur visible lorsque la barre d'URL s'affiche.
Le bloc contenant initial (ICB) est le bloc contenant racine utilisé lors de la mise à l'échelle des éléments par rapport à leurs parents. Par exemple, si vous attribuez un style width: 100%; height: 100% à l'élément <html>, il aura la même taille que l'ICB. Avec cette modification, la barre d'informations de la recherche ne se redimensionnera pas lorsque la barre d'URL sera masquée.
Elle conservera la même hauteur, comme si la barre d'URL était toujours affichée ("plus petit viewport possible"). Cela signifie qu'un élément de la taille de la barre d'adresse n'occupera pas toute la hauteur visible lorsque la barre d'adresse est masquée.
Il existe une exception aux modifications ci-dessus, à savoir les éléments position: fixed. Leur comportement reste inchangé. Autrement dit, un élément position:
fixed dont le bloc contenant est l'ICB se redimensionne en fonction de l'affichage ou du masquage de la barre d'URL. Par exemple, si sa hauteur est 100%, elle remplira toujours exactement la hauteur visible, que la barre d'URL soit affichée ou non. De même, pour les longueurs vh, elles seront également redimensionnées pour correspondre à la hauteur visible en tenant compte de la position de la barre d'URL.
Plusieurs raisons expliquent ce changement:
Blocs
vhutilisables sur mobile. Auparavant, l'utilisation d'unitésvhsignifiait qu'une page était réorganisée de manière brutale chaque fois que l'utilisateur changeait de direction de défilement.Amélioration de l'expérience utilisateur Si une page est reflowée pendant que l'utilisateur lit le document, il risque de perdre sa position relative dans le document. Cela est frustrant, mais cela entraîne également une utilisation supplémentaire du processeur et une décharge de la batterie pour recomposer et repeindre la page.
Amélioration de l'interopérabilité avec Safari sur iOS. Le nouveau modèle doit correspondre au comportement de Safari, ce qui facilitera la vie des développeurs Web. Le choix peu intuitif de faire des unités
vhle plus grand viewport possible, mais le plus petit ICB possible, vise à reproduire le comportement de Safari.
Pour les scénarios en plein écran, lorsque la barre d'URL est verrouillée en mode masqué, la barre d'interface utilisateur de la barre d'adresse utilise la hauteur en plein écran. Cela est cohérent avec les définitions ci-dessus, car la "fenêtre d'affichage la plus petite possible" correspond à la fenêtre d'affichage complète, car la barre d'URL ne s'affiche pas lors du défilement.
Démo
- Voici une démonstration.
Les quatre barres à droite de la page représentent toutes les combinaisons possibles de
99%,99vh,position:fixedetposition:absolutefournies sur une page à faire défiler. En masquant la barre d'URL, vous pouvez voir l'impact de cette modification sur chacun d'eux. Les événements de redimensionnement sont imprimés en bas de la page.
Assistance
- Chrome 56 sur Android.