En novembre, avec la sortie de Chrome 108, Chrome apportera quelques modifications au comportement de la fenêtre d'affichage de la mise en page lorsque le clavier à l'écran s'affiche. Avec ce changement, Chrome sur Android ne redimensionnera plus la fenêtre d'affichage de mise en page, mais uniquement la fenêtre d'affichage visuelle. Le comportement de Chrome sur Android sera ainsi aligné sur celui de Chrome sur iOS et de Safari sur iOS.
Voici quelques informations sur ce qui se passe, pourquoi Chrome effectue ce changement et ce que vous pouvez faire pour vous y préparer.
La fenêtre d'affichage de la mise en page et la fenêtre d'affichage visuelle
Lorsque vous accédez à un site Web, vous ne voyez pas l'intégralité du contenu de la page une fois qu'elle est chargée. À la place, le navigateur vous propose une fenêtre d'affichage qui vous permet de voir une partie de la page. Cette fenêtre d'affichage est également appelée fenêtre d'affichage de la mise en page. Lorsque le contenu d'une page devient trop volumineux, le navigateur propose un mécanisme de défilement.
Lorsque vous positionnez des éléments à l'aide de position: fixed, ils sont disposés par rapport à cette fenêtre d'affichage de mise en page. Comme la fenêtre d'affichage de la mise en page reste en place lorsque vous faites défiler une page, les éléments qui utilisent position: fixed restent également en place.
position: fixed (cases bleues). De gauche à droite : Safari sur iPhone, Chrome sur Android et Firefox sur Android.
En plus de cette fenêtre d'affichage de la mise en page, le navigateur propose également une fenêtre d'affichage visuelle. Il représente la partie de la fenêtre d'affichage actuellement visible. Au niveau de zoom 1, cette fenêtre d'affichage visuelle est aussi grande que la fenêtre d'affichage de la mise en page.
Lorsque vous effectuez un zoom avant en pinçant l'écran, vous réduisez la taille de la fenêtre d'affichage visuelle par rapport à la fenêtre d'affichage de mise en page.
Comportement de redimensionnement de la fenêtre d'affichage
Lorsque vous sélectionnez une entrée ou une autre zone modifiable, les appareils (principalement les appareils à écran tactile) peuvent afficher un clavier à l'écran. Ce clavier, souvent appelé clavier virtuel,permet aux utilisateurs de saisir du contenu dans la zone modifiable.
Dans ce cas, les navigateurs réagissent de l'une des manières suivantes en fonction des différentes fenêtres d'affichage :
- Redimensionner uniquement la fenêtre d'affichage visuelle et décaler la fenêtre d'affichage de mise en page.
- Redimensionnez la fenêtre d'affichage visuelle et la fenêtre d'affichage de mise en page.
- Ne redimensionnez pas la fenêtre d'affichage de mise en page ni la fenêtre d'affichage visuelle, en superposant le clavier virtuel sur les deux.
Ces trois comportements sont représentés comme suit :
Selon la combinaison de navigateur et d'OS utilisée par un visiteur, l'un des comportements est utilisé, indépendamment de votre volonté.
Mappage des différents comportements de redimensionnement
Dans le cadre de l'effort d'investigation sur la fenêtre d'affichage (qui fait partie d'Interop 2022), différents aspects liés à la fenêtre d'affichage ont été étudiés pour chaque combinaison de navigateur et d'OS majeurs.
L'un des aspects testés est le comportement de redimensionnement lorsque le clavier virtuel est affiché. Cela a conduit à la classification suivante :
Groupe 1
Navigateurs qui redimensionnent la fenêtre d'affichage visuelle, sans modifier la fenêtre d'affichage de mise en page.
- Safari sur iOS
- Safari sur iPadOS
- Chrome sur ChromeOS
- Chrome sur iOS
- Chrome sur iPadOS
- Edge sur iOS
- Edge sur iPadOS
Groupe 2
Navigateurs qui redimensionnent à la fois la fenêtre d'affichage visuelle et la fenêtre d'affichage de mise en page.
- Chrome pour Android
- Firefox sur Android
- Edge sur Android
- Firefox sur iOS
Groupe 3
Navigateurs qui ne redimensionnent aucune des fenêtres d'affichage :
- Aucun par défaut : dans Chrome sur Android, vous pouvez activer ce comportement à l'aide de l'API VirtualKeyboard.
Effets secondaires de chaque comportement
Cette différence dans la façon dont les différentes fenêtres d'affichage sont redimensionnées lorsque le clavier virtuel est affiché entraîne un comportement de mise en page et de dimensionnement non interopérable des sites Web.
Dans les navigateurs du groupe 1, avec le clavier virtuel affiché :
- Les valeurs calculées pour les unités relatives à la fenêtre d'affichage restent les mêmes.
- Les éléments conçus pour occuper tout l'espace visuel conservent leur taille.
- Les éléments qui utilisent
position: fixedrestent en place et peuvent être masqués par le clavier virtuel.
Dans les navigateurs du groupe 2, avec le clavier virtuel affiché :
- Les valeurs calculées pour les unités relatives à la fenêtre d'affichage diminuent.
- Les éléments conçus pour occuper tout l'espace visuel sont réduits.
- Les éléments qui utilisent
position: fixedpeuvent se retrouver ailleurs dans la mise en page.
position: fixed (cases bleues). Les images montrent Safari sur iOS (à gauche) et Chrome sur Android (au centre et à droite).
À moins d'avoir recours au sniffing de user-agent ou d'utiliser des scripts complexes, vous ne pouvez pas savoir quel comportement est utilisé. Vous ne pouvez pas non plus modifier ce comportement, car il est déterminé par la combinaison du navigateur et de l'OS utilisés par l'internaute.
Modification du comportement par défaut dans Chrome 108
À partir de Chrome 108, Chrome sur Android ajustera son comportement de redimensionnement de la fenêtre d'affichage pour ne plus redimensionner la fenêtre d'affichage de mise en page lorsque le clavier à l'écran est affiché.
Le comportement de Chrome sur Android sera ainsi aligné sur celui de Chrome sur iOS, iPadOS, Windows et CrOS, de Safari sur iOS et iPadOS, et d'Edge sur iOS, iPadOS et Windows.
Grâce à ce changement, les auteurs peuvent savoir quel comportement sera utilisé, quel que soit l'OS sur lequel Chrome est exécuté. De plus, il permet d'obtenir des unités stables par rapport à la fenêtre d'affichage : l'affichage ou le masquage du clavier à l'écran n'affecte pas ces unités.
.Activer un autre comportement
Si vous souhaitez que votre site Web utilise le comportement de redimensionnement antérieur à la version 108, ne vous inquiétez pas. Chrome 108 inclut également une extension de la balise Meta viewport.
La clé interactive-widget vous permet d'indiquer à Chrome le comportement de redimensionnement que vous souhaitez.
Les valeurs acceptées pour interactive-widget sont les suivantes :
resizes-visual: redimensionne uniquement la fenêtre d'affichage visuelle, mais pas la fenêtre d'affichage de la mise en page.resizes-content: redimensionne la fenêtre d'affichage visuelle et la fenêtre d'affichage de mise en page.overlays-content: ne redimensionne aucune fenêtre d'affichage.
Pour réactiver l'ancien comportement de Chrome sur Android, définissez la balise Meta viewport comme suit :
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=r>esizes-content"
Si vous n'incluez pas interactive-widget dans la balise Meta viewport, Chrome utilisera le comportement par défaut, à savoir resizes-visual.
Voici l'effet de ces paramètres sur les différentes fenêtres d'affichage :
resizes-visual, resizes-content et overlays-content.
Vous pouvez tester l'effet de chaque valeur dans votre navigateur sur ce site Web de démonstration.
Tests et commentaires
Nous prévoyons quelques différences mineures pour les sites existants, mais nous pensons qu'elles ne seront pas bloquantes, car Chrome 108 sur Android se comportera désormais de la même manière que Safari sur iOS. Par conséquent, les sites Web qui fonctionnent correctement sur Safari sous iOS devraient également fonctionner correctement sur Chrome 108 sous Android.
Toutefois, nous encourageons les auteurs de sites Web à tester activement leurs sites dans Chrome 108, qui est en version bêta depuis le 27 octobre 2022. Recherchez en particulier les éléments qui utilisent position: fixed et/ou qui s'appuient sur des unités relatives à la fenêtre d'affichage.
Vous pouvez envoyer vos commentaires sur crbug.com. Veillez à inclure "clavier à l'écran" dans le titre du rapport.