Vienen varios cambios en Chrome 108 | trucos CSS

"Cambiar el desbordamiento de elementos reemplazados en CSS":

A partir de Chrome 108, los siguientes elementos reemplazados respetan la propiedad de desbordamiento: img, video y canvasEn versiones anteriores de Chrome, esta propiedad se ignoraba para estos elementos.

Esto significa que una imagen que anteriormente se recortaba en su cuadro de contenido ahora puede ajustarse fuera de esos límites si se le indica que lo haga en una hoja de estilo.

Por lo tanto, las imágenes, los videos y los elementos de lienzo que alguna vez se recortaron pueden mostrar un desbordamiento cuando se envíe Chrome 108. Situaciones señaladas en las que esto puede afectar su trabajo existente:

• los object-fit propiedad se utiliza para escalar la imagen y rellenar el campo. Si la relación de aspecto no coincide con el campo, la imagen saldrá de los límites.
• los border-radius hace que una imagen cuadrada parezca un círculo, pero como overflow es visible, ya no se produce recorte.
• Configuración inherit: all y causar la sucesión de todos los bienes, incluidos overflow

Vale la pena leer el artículo completo para ver ejemplos de código, pero la solución al desbordamiento visible no deseado es reemplazar el valor predeterminado de UA overflow: visible con overflow: clip:

img {
  overflow: clip;
}

"Prepárese para los cambios de comportamiento de cambio de tamaño de la ventana gráfica que llegarán a Chrome en Android":

En noviembre, con el lanzamiento de Chrome 108, Chrome realizará algunos cambios en la forma en que se comporta la ventana gráfica de diseño cuando se muestra el teclado en pantalla (OSK). Con este cambio, Chrome en Android ya no cambiará el tamaño de la ventana gráfica de diseño, sino que solo cambiará el tamaño de la ventana gráfica visual. Esto alineará el comportamiento de Chrome en Android con el de Chrome en iOS y Safari en iOS.

Este es un cambio relacionado con los dolores de cabeza habituales de trabajar con módulos de ventana y posicionamiento fijo en dispositivos táctiles móviles. Hemos cubierto (y tratado de resolver) a lo largo de los años:

El cambio significa que Chrome en Android ya no cambiará el tamaño de la ventana gráfica de diseño cuando se muestre el teclado en pantalla. Por lo tanto, los valores de la unidad de ventana gráfica calculados ya no colapsarán cuando se muestre el teclado del dispositivo. Lo mismo ocurre con los elementos que están diseñados para ocupar la ventana gráfica completa, ya que ya no se encogen para acomodar el teclado. Y ya no se desplazará un elemento con una posición fija a quién sabe dónde cuando aparezca el teclado.

Esto proporciona un comportamiento más consistente en todos los navegadores que es consistente con Chrome, Safari y Edge en iOS y iPadOS. Esto es genial, incluso si el comportamiento actualizado no es el ideal, porque la interfaz de usuario del teclado aún puede cubrir y ocultar elementos que se interponen en su camino.

Si prefiere que los elementos permanezcan visibles cuando esto suceda, vale la pena mirar una solución que Chris compartió hace mucho tiempo que usa el prefijo webkit-fill-available Propiedad:

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

Esto usa el espacio disponible en la ventana gráfica, no lo que abarca la interfaz de usuario... pero Chrome actualmente ignora la propiedad, y apuesto a que es poco probable que comience a respetarla en la versión 108. Sin embargo, ese podría ser un punto discutible, ya que Chrome 108 también presenta soporte para unidades de ventana pequeñas, grandes y dinámicas ya admitidas en Safari y Firefox.