I have a Visualforce page running inside a Salesforce1 page. The page contains a sticky header (position: fixed, etc.). This works great everywhere except on iOS. If I render the page directly in Safari on the phone (iOS) the sticky header works as expected, but when I view the page inside Salesforce1 the sticky header stops working. It just scrolls with the rest of the page.
I believe it has to do with the page being rendered in an iFrame inside Salesforce1. Similar to this issue: https://stackoverflow.com/questions/27083740/why-does-positionfixed-not-work-when-viewed-in-an-iframe-using-an-iphone-or. The fixes I have seen are to set the height and width of the iFrame to 100%. But being inside Salesforce1 that can't be done. Right?
Has anyone encountered and/or solved this issue?
Best Answer
Influenced by this Stackoverflow answer I wrapped all my Visualforce page content inside a
<div id="ScrolledArea"></div>
and added the following CSS to the page: