Le comportement de redimensionnement de la barre d'adresse va changer dans Chrome sur Android à partir de la version 56. Quelques informations sur les Super Stickers :
Les longueurs définies dans les unités de fenêtre d'affichage (par exemple, vh) ne sont pas redimensionnées lorsque la barre d'adresse est affichée ou masquée. 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'adresse était toujours masquée. Autrement dit, les unités vh sont redimensionnées en fonction de la "plus grande fenêtre d'affichage possible". Cela signifie que 100vh sera plus grand que la hauteur visible lorsque la barre d'adresse s'affichera.
Le bloc "Initial Containing Block" (ICB) est le bloc contenant la racine utilisé lors du dimensionnement des éléments par rapport à leurs parents. Par exemple, si vous attribuez le style width: 100%; height: 100% à l'élément <html>, il aura la même taille que l'ICB. Avec cette modification, l'ICB ne sera pas redimensionné lorsque la barre d'adresse sera masquée.
Au lieu de cela, elle conservera la même hauteur, comme si la barre d'URL s'affichait systématiquement ("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 lorsque 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 contenant est l'ICB sera redimensionné en réponse à l'affichage ou au masquage de la barre d'URL. Par exemple, si sa hauteur est 100%, elle remplira toujours exactement la hauteur visible, que la barre d'adresse soit affichée ou non. De même, pour les longueurs de vh, elles sont également 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 mobile. Auparavant, l'utilisation d'unitésvhsignifiait qu'une page s'affichait de manière brutale chaque fois que l'utilisateur changeait de direction de défilement.Expérience utilisateur améliorée. Si une page est remaniée pendant que l'utilisateur la lit, il risque de perdre son emplacement relatif dans le document. Cette situation est frustrante, mais elle 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 qui consiste à faire des unités
vhla 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'adresse est verrouillée sur un état masqué, l'ICB utilise la hauteur en plein écran. Ceci est cohérent avec les définitions ci-dessus, car la "plus petite fenêtre d'affichage possible" correspond à la fenêtre d'affichage complète, car la barre d'URL ne s'affiche pas lorsque l'utilisateur fait défiler la page.
Démonstration
- (voir cette démonstration).
Les quatre barres à droite de la page représentent toutes des combinaisons possibles de
99%,99vh,position:fixedetposition:absolutefournies sur une page déroulante. Le fait de masquer la barre d'URL montre l'impact sur chacun d'eux. Les événements de redimensionnement sont imprimés vers le bas de la page.
Assistance
- Chrome 56 sur Android