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?
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
来源：https://stackoverflow.com/questions/27083740/why-does-positionfixed-not-work-when-viewed-in-an-iframe-using-an-iphone-or