Aspect-ratio falla en iPhone al girar: menudo lío

Este artículo ha sido generado con IA a partir de mis comentarios, indicaciones e información recopilada. Suelo escribir en varios chats internos, con compañeros, amigos de profesión, entre otros, con la info algo redactada, pero no como para ponerlo en una web. Si has visto este mensaje y desaparece en el futuro, he redactado la entrada y ya es 100% humana. Pero, por ahora, te puede servir. Gracias por entenderlo. 🙂

Si has trabajado con aspect-ratio en CSS, probablemente te hayas encontrado con los fallos e inconsistencias de Safari (especialmente en iPhones). Incluso girando el móvil rápidamente, se rompe la proporción. Es frustrante.

🛠 La solución más confiable:

Usar el clásico padding-top con un ::before para mantener la proporción:

SCSS

&::before {
  content: "";
  display: block;
  padding-top: calc(100% * calc(734 / 1082)); // Altura / Ancho
}

&::before {
  content: "";
  display: block;
  padding-top: calc(100% * calc(734 / 1082)); // Altura / Ancho
}

Pros:
- – Funciona perfectamente y es retrocompatible con navegadores antiguos.
Contras:
- No tan limpio como el uso de aspect-ratio.

❌ Lo que falla (con soporte condicional):

Combinar aspect-ratio con un fallback en navegadores que no lo soporten:

SCSS

position: relative;
aspect-ratio: 1082 / 734;

@supports not (aspect-ratio: 1082 / 734) {
  &::before {
    content: "";
    display: block;
    padding-top: calc(100% * calc(734 / 1082));
  }
}

position: relative;
aspect-ratio: 1082 / 734;

@supports not (aspect-ratio: 1082 / 734) {
  &::before {
    content: "";
    display: block;
    padding-top: calc(100% * calc(734 / 1082));
  }
}

Problemas en Safari: Aunque aspect-ratio es compatible, su implementación no es consistente. Se rompe en ciertos casos, como al rotar el móvil rápidamente.

🌟 Para SASS/SCSS, pero con riesgos:

Usar un mixin en Sass para manejar tanto aspect-ratio como ::before:

SCSS

@mixin aspect-ratio($width, $height) {
  position: relative;

  &::before {
    content: "";
    display: block;
    padding-top: calc(100% * calc(#{$height} / #{$width}));
  }

  > * {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@mixin aspect-ratio($width, $height) {
  position: relative;

  &::before {
    content: "";
    display: block;
    padding-top: calc(100% * calc(#{$height} / #{$width}));
  }

  > * {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

Ventajas: Ideal para manejar múltiples casos y permite una mejor escalabilidad en proyectos grandes.
Cuidado: A pesar de ser elegante, puede presentar inconsistencias en Safari debido a la implementación de aspect-ratio.

💡 Conclusión:

Si buscas estabilidad garantizada, ve por el método clásico con ::before.
Si necesitas modernidad y escalabilidad, el mixin es ideal (pero revisa bien en Safari).
Y, sobre todo, prueba siempre tus diseños en dispositivos Apple. Safari no deja de ser una pequeña pesadilla.

¡A seguir desarrollando con precaución! 🚀