Logotipo de Zephyrnet

Un par de cambios en Chrome 108

Fecha:

"Un cambio para desbordar en elementos reemplazados en CSS":

Desde Chrome 108, los siguientes elementos reemplazados respetan la propiedad de desbordamiento: imgvideo y canvas. En versiones anteriores de Chrome, esta propiedad se ignoraba en estos elementos.

Esto significa que una imagen que antes se recortaba en su cuadro de contenido ahora puede dibujarse fuera de esos límites si se especifica que lo haga en una hoja de estilo.

Por lo tanto, los elementos de imagen, video y lienzo que alguna vez se recortaron pueden mostrar el desbordamiento cuando se envíe Chrome 108. Las situaciones señaladas en las que esto podría afectar su trabajo existente:

  • La object-fit propiedad se utiliza para escalar la imagen y llenar el cuadro. Si la relación de aspecto no coincide con el cuadro, la imagen se dibujará fuera de los límites.
  • La border-radius hace que una imagen cuadrada parezca un círculo, pero como overflow es visible, el recorte ya no se produce.
  • Fijar inherit: all y haciendo que todas las propiedades hereden, incluyendo overflow.

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

img {
  overflow: clip;
}

"Prepárese para los cambios en el 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 el comportamiento de Layout Viewport 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 y, en su lugar, cambiará el tamaño solo de la ventana gráfica visual. Esto traerá el comportamiento de Chrome en Android a la par con el de Chrome en iOS y Safari en iOS.

Este es un cambio relacionado con los dolores de cabeza comunes de trabajar con unidades de visualización y posicionamiento fijo en dispositivos táctiles móviles. Lo hemos cubierto (e intentado resolver) a lo largo de los años:

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

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

Si prefiere que los elementos permanezcan visibles cuando eso suceda, vale la pena mirar un 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;
}

Eso usa el espacio disponible en la ventana gráfica en lugar de lo que está cubierto por la interfaz de usuario... pero Chrome actualmente ignora la propiedad, y apostaría el centavo en mi bolsillo a que es poco probable que comience a respetarla en la versión 108. Sin embargo, ese puede ser un punto discutible, ya que Chrome 108 también presenta compatibilidad con unidades de ventana gráfica pequeñas, grandes y dinámicas, que ya son compatibles con Safari y Firefox.

Los datos de soporte de este navegador son de Puedo usar, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y en adelante.

Ordenador de sobremesa

Chrome Firefox IE Southern Implants Safari
108 101 No No 15.4

Móvil / Tableta

Android Chrome Android Firefox Android iOS Safari
No 106 No 15.4
punto_img

Información más reciente

punto_img

Habla con nosotros!

¡Hola! ¿Le puedo ayudar en algo?