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.
