iOS iFrame element dimensions can not be constrained

[scottjehl]

Summary:

iOS doesn't respect width or height on an iframe via CSS or any other means. It always sizes the iframe to the child document height. This is generally a good feature, but it can cause confusion if you're doing something where you expect this to work.

Platforms:

• iOS 5 and older Safari

How to reproduce:

1. style an iframe with dimensions smaller than its document
2. open it in ios Safari

Reduced Example:

http://jsbin.com/olobaw

Bug Tracker ticket(s):

Workarounds:

[zachleat]

Add width: 1px; min-width: 100% and scrolling="no". This may also work with height but I did not test it.

Workaround test case: https://jsbin.com/gupabi/

Screenshots below are on an iPhone 6 using iOS9.

Before, using <iframe>

After, using <iframe style="width: 1px; min-width: 100%;" scrolling="no">

[simevidas]

@zachleat If we have to sacrifice scrolling, then a more “standard” approach (that seems to work on iOS) would be absolute positioning + overflow: hidden on the parent <div>: https://jsbin.com/fuxonas/edit?html,css,output

[zachleat]

@simevidas Unfortunately that doesn’t quite work, the iframe doesn’t respect the width property:

[cesar-oyarzun-m]

@zachleat where you able to fix the problem with the width on the Iframe? I'm testing on IOS10 and I see the same problem with iframes

[zachleat]

@cesar-oyarzun-m: The min-width trick above seemed to work ok for fluid width iframes.

[cesar-oyarzun-m]

@zachleat the problem that I have is that I have an image inside the iframe, but the image width is bigger then the iframe, so the iframe overflow, I just want the image to take the same width that the iframe, I don't want the iframe to overflow. Seems that the content inside the iframe doesn't respect the iframe size, I have set the iframe width=100% and height=100%