Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Responsive iframes on iOS do not size correctly (workaround included) #11133
What's the issue?
Responsive iframes are not sized correctly on iOS causing embedded video players to be scrollable and clipped due to content being sized larger than the container.
How do we reproduce the issue?
Inspecting Desktop Safari simulating an iPhone 6S
Inspecting iOS Safari on 4.7" iPhone 7
What browsers are affected?
Tested Safari on a 4.7" iPhone 7 with iOS 10.3.3(14G60)
Which AMP version is affected?
Adding the following CSS rule seems to fix the problem:
As can be observed in the JSBin here.
EDIT the workaround above doesn't validate, but this one does:
Now I understand.
The issue with this approach is that the iframe's resizes to the full size of the document it contains. This breaks position-fixed elements inside the iframe (for instance, change the
This is a much more difficult problem to solve (it requires a lot of JS and DOM hacks) than getting the iframe's document to be scrollable (requires a scrollable