15

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?

Community
  • 1
  • 1
ayjay
  • 1,272
  • 2
  • 16
  • 25
  • 2
    I am getting the same issue, have you found any workarounds yet? – Shuvro Dec 15 '14 at 10:15
  • 1
    @Shuvro, nope and I've stopped working on it further. However, a friend of mine sent me [this link](http://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari), but I have yet to try it. It's not directly related to the issue, but may provide some insight. – ayjay Dec 15 '14 at 19:59
  • It doesn't seem to fix the problem, but it's a very useful solution to other iOS iframe issues, thanks! – Andrea Tondo Dec 18 '14 at 09:47

1 Answers1

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:

Community
  • 1
  • 1
Patrick
  • 6,495
  • 6
  • 51
  • 78