---
title: "Aspect-ratio falla en iPhone al girar: menudo lío"
description: "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 pro..."
url: https://dev.adammartin.es/micro-pildora/safari-y-aspect-ratio-menudos-lios-causan/
date: 2025-01-10
modified: 2026-08-04
author: "Adam Martin"
type: micro-pildora
lang: es
---

# 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:

SCSSposition: 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! 🚀