Pasar al contenido principal

iOS no respeta el ancho fijado para Iframe

La principal consecuencia de este "bug" es que el iframe puede rebasar al ancho del elemento que lo contiene (un div por ejemplo), a pesar de haber configurado el ancho del iframe. 
Esto provoca que aparezca un espacio a la derecha de la web, echándo por tierra todo el responsive de la web.

Esto no ocurre siempre, solo si se cumple el siguiente requisito:
- El contenido de la aplicación es más ancho que el viewport disponible (el iframe), aunque la página de dentro del iframe tenga un ancho establecido en el body del 100%. 

Lo que ocurre es que si se da esta condición el navegador ignora el ancho fijado del iframe (ya sea fijo en px o variable).

 

Solución

 

Añadir css en la página incrustada en el iframe:

body {
  width: 1px;
  min-width: 100%;
}

¿Por qué funciona? Al establecer el ancho a 1px el ancho que interpreta el navegador nunca va a ser superior al disponible, y añadiendo el min-width evitamos que se vea con 1px de ancho.

Responsive
Theming
Iframe
iOS
Image
Cristian Aliaga

Cristian Aliaga

Senior Drupal developer