Why does `position:fixed` not work when viewed in an `iframe` using an iPhone or iOS device?

Question

I've looked into stackoverflow and it seems that position:fixed in an iframe for iOS mobile devices has been an issue in the past but have yet to have an answer.

Here's an example I created via jsbin: http://jsbin.com/pekeca/1/

In that example, there is a parent HTML page that uses iframe which contains another HTML page (child). Here are the things to note:

• When the parent HTML is viewed on any device, the navigation bar in the child HTML stays fixed. This is the intended behavior.
• However, when the parent HTML is viewed on an iPhone regardless of the browser, the navigation bar in the child HTML loses its fixed position. This is a bug that only happens in iPhones.
• When the child HTML page is viewed directly (i.e., not inside an iframe) in an iPhone, the navigation bar stays in a fixed position and works fine.

Has anyone figured out a workaround for position:fixed in iPhones or iOS devices?

Answer 1

In Chrome and Safari on iOS it seems the issue here is not the fixed position, but with the height of the iframe. From another SO answer: "Starting in version 4.2.1 of Safari iOS, and still going as of 4.3.3, the entire content of an iFrame is forcibly shown."

These other posts might help you:

• iframe on iOS (iPad) content cropping issue - https://stackoverflow.com/a/10816492/1359306
• iFrame and Mobile Safari (iPad/iPhone) - https://stackoverflow.com/a/19667786/1359306