El 24 de enero del 2024 Google lanzó una nueva versión de Chrome (121). En algunos casos, esta actualización hizo que las imágenes de los carruseles de imágenes se vieran deformadas, debido a estilos propios del navegador.
¿Cómo lo arreglo?
¡Es simple! Y hay 2 formas de hacerlo:
#1 - CSS desde la personalización de tu diseño
Es la forma más sencilla, desde la sección de Personalizar el diseño actual, ir a la parte de Edición avanzada de CSS.
Agregar el siguiente código
img.slider-image{
contain-intrinsic-size: unset !important;
}Y ¡listo!
#2 - Cambiando los archivos de tu FTP abierto
En los archivos que usen data-sizes="auto" en conjunto con el plugin Swiper, remover el atributo data-sizes="auto". Esto puede suceder generalmente en el carrusel de imágenes de la página de inicio.
Ejemplo antes del cambio
<img
{% if slide.width and slide.height %} width="{{ slide.width }}" height="{{ slide.height }}" {% endif %}
src="{{ slide_src }}"
data-sizes="auto"
data-srcset="{{ slide.image | static_url | settings_image_url('xlarge') }} 1400w, {{ slide.image | static_url | settings_image_url('1080p') }} 1920w" class="slider-image swiper-lazy"
alt="{{ 'Carrusel' | translate }} {{ loop.index }}"/>Ejemplo después del cambio
<img
{% if slide.width and slide.height %} width="{{ slide.width }}" height="{{ slide.height }}" {% endif %}
src="{{ slide_src }}"
data-srcset="{{ slide.image | static_url | settings_image_url('xlarge') }} 1400w, {{ slide.image | static_url | settings_image_url('1080p') }} 1920w" class="slider-image swiper-lazy"
alt="{{ 'Carrusel' | translate }} {{ loop.index }}"/>Y ¡listo! Además de evitar que se deformen las imágenes de carrusel, al eliminar data-sizes dejás el código más limpio.