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

Question

I looked at stackoverflow and it seems that position:fixed in an iframe for iOS mobile devices has been a problem in the past, but so far there has been no answer.

Here is an example that I created via jsbin: http://jsbin.com/pekeca/1/

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

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

Has anyone found a workaround for position:fixed on iPhone or iOS devices?

Answer 1

In Chrome and Safari on iOS, it seems that the problem here is not in a fixed position, but in the height of the iframe. From another SO answer: "Starting with version 4.2.1 of Safari iOS, and still keeping in mind 4.3.3, all iFrame content is displayed forcefully."

These other posts may help you:

• iframe on iOS (iPad) content trimming issue - stack overflow
• iFrame and Mobile Safari (iPad / iPhone) - stack overflow