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