Le 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 dans les unités de la fenêtre d'affichage (par exemple, vh) ne sont pas redimensionnées en réponse à l'affichage ou au masquage de la barre d'URL. Au lieu de cela, les unités vh sont redimensionnées en fonction de la hauteur de la fenêtre d'affichage, comme si la barre d'URL était toujours masquée. Autrement dit, les unités vh seront redimensionnées pour la "plus grande fenêtre d'affichage possible". Cela signifie que 100vh sera supérieur à la hauteur visible lorsque la barre d'URL s'affiche.
Le bloc contenant initial (ICB) est le bloc contenant la racine utilisé lors du dimensionnement des éléments par rapport à leurs parents. Par exemple, si vous attribuez à l'élément <html> un style de width: 100%; height: 100%, sa taille sera identique à celle de l'ICB. Avec cette modification, le ICB n'est pas redimensionné lorsque la barre d'URL est masquée.
Au lieu de cela, elle conserve la même hauteur, comme si la barre d'URL s'affichait en permanence ("la plus petite fenêtre d'affichage possible"). Cela signifie qu'un élément dont la taille correspond à la hauteur de l'ICB ne remplira pas complètement la hauteur visible tant que la barre d'URL est masquée.
Il existe une exception aux modifications ci-dessus, qui concerne les éléments position: fixed. Leur comportement reste inchangé. Autrement dit, un élément position:
fixed dont le bloc conteneur est ICB sera redimensionné en réponse à l'affichage ou au masquage de la barre d'URL. Par exemple, si sa hauteur est de 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 sont redimensionnées pour correspondre à la hauteur visible, en tenant compte de la position de la barre d'URL.
Plusieurs raisons peuvent expliquer ce changement:
Unités
vhutilisables sur les mobiles. Auparavant, l'utilisation d'unitésvhsignifiait qu'une page s'ajustait de manière brusque chaque fois que l'utilisateur changeait de direction de défilement.Amélioration de l'expérience utilisateur. Si une page est ajustée pendant que l'utilisateur la lit, il risque de perdre son emplacement relatif dans le document. C'est frustrant, mais cela entraîne également une utilisation supplémentaire du processeur et une décharge de la batterie pour remettre en page 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 facilite la vie des développeurs Web. Le choix peu intuitif de faire en sorte que les unités
vhsoient la plus grande fenêtre d'affichage possible, mais l'ICB la plus petite possible consiste à s'adapter au comportement de Safari.
Pour les scénarios en plein écran, lorsque la barre d'URL est verrouillée en état masqué, l'ICB utilise la hauteur plein écran. Cela est cohérent avec les définitions ci-dessus, car "la plus petite fenêtre d'affichage possible" représente la fenêtre d'affichage complète, car la barre d'URL ne s'affiche pas lors du défilement.
Démonstration
- 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 déroulante. Le fait de masquer la barre d'URL montre comment cela affecte chacune d'entre elles. Les événements de redimensionnement sont imprimés sur la page.
Assistance
- Chrome 56 sur Android.