Quelques changements à venir dans Chrome 108

"Un changement de débordement sur les éléments remplacés dans CSS":

A partir de Chrome 108, les éléments remplacés suivants respectent la propriété overflow : img, video et les  canvas. Dans les versions antérieures de Chrome, cette propriété était ignorée sur ces éléments.

Cela signifie qu'une image qui était auparavant découpée dans sa zone de contenu peut désormais être dessinée en dehors de ces limites si cela est spécifié dans une feuille de style.

Ainsi, les éléments d'image, de vidéo et de canevas qui étaient autrefois coupés peuvent afficher le débordement lors de la livraison de Chrome 108. Les situations notées où cela pourrait affecter votre travail existant :

• Le object-fit La propriété est utilisée pour redimensionner l'image et remplir la boîte. Si le rapport d'aspect ne correspond pas à la boîte, l'image s'affichera en dehors des limites.
• Le border-radius propriété fait ressembler une image carrée à un cercle, mais parce que overflow est visible, l'écrêtage ne se produit plus.
• Paramètres inherit: all et faisant hériter toutes les propriétés, y compris overflow.

Cela vaut la peine de lire l'article complet pour des exemples de code, mais la solution pour le débordement visible indésirable remplace la valeur par défaut de l'UA overflow: visible comprenant overflow: clip:

img {
  overflow: clip;
}

"Préparez-vous aux changements de comportement de redimensionnement de la fenêtre d'affichage à venir dans Chrome sur Android":

En novembre, avec la sortie de Chrome 108, Chrome apportera quelques modifications au comportement de la fenêtre de mise en page lorsque le clavier à l'écran (OSK) s'affiche. Avec ce changement, Chrome sur Android ne redimensionnera plus la fenêtre de mise en page, mais redimensionnera uniquement la fenêtre d'affichage visuelle. Cela mettra le comportement de Chrome sur Android à la hauteur de celui de Chrome sur iOS et de Safari sur iOS.

Il s'agit d'un changement lié aux maux de tête courants liés au travail avec des unités de fenêtre et au positionnement fixe sur les appareils tactiles mobiles. Nous l'avons couvert (et essayé de résoudre) au fil des ans :

Le changement signifie que Chrome sur Android ne redimensionnera plus la fenêtre de mise en page lorsque le clavier à l'écran est affiché. Ainsi, les valeurs calculées des unités de la fenêtre ne seront plus réduites lorsque le clavier d'un périphérique est affiché. Il en va de même pour les éléments conçus pour occuper toute la fenêtre d'affichage qui ne se rétrécissent plus pour accueillir le clavier. Et plus un élément à position fixe ne se retrouvera qui sait où lorsque le clavier apparaît.

Cela apporte un comportement inter-navigateur plus cohérent qui est en ligne avec Chrome, Safari et Edge sur iOS et iPadOS. C'est formidable, même si le comportement mis à jour n'est pas idéal, car l'interface utilisateur du clavier peut toujours couvrir et masquer les éléments qui se mettent en travers de son chemin.

Si vous préférez que les éléments restent visibles lorsque cela se produit, cela vaut la peine de regarder un solution que Chris a partagée il y a longtemps qui utilise le préfixe webkit-fill-available propriété:

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

Cela utilise l'espace disponible dans la fenêtre plutôt que ce qui est couvert par l'interface utilisateur… mais Chrome ignore actuellement la propriété, et je parierais le nickel dans ma poche qu'il est peu probable qu'il commence à le respecter dans la version 108. Cela peut être un point discutable, cependant, comme Chrome 108 introduit également prise en charge des petites, grandes et dynamiques unités de fenêtre d'affichage, qui sont déjà prises en charge dans Safari et Firefox.