iOS7 position:fixed; works ugly

Question

I know iScroll and I already used jQuery mobile for a long time and I know both of them fixed this problem but I want to do it myself and not include a large framework for this. My question is how did jQuery Mobile fixed this position:fixed; problem on iOS devies? Currently all my fixed positioned elements will only change the position if the scroll is finished, but it should always appear fixed at the top and not only at the end of the scroll.

Answer 1

I had the same problem. I had a fixed element over the body and this was very buggy. And for me height:auto; instead of height:100% worked. Full code:

body,
html{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto; /* iOS position:fixed; elements fix (not 100%) */
    min-height:100%;
    overflow-x:hidden;
}

Answer 2

position:fixed on iOS 7 works pretty well, actually (there are minor issues, for instance juddering might be an issue depending on certain factors) so I think maybe you're trying to mimic a sticky scroll (where an element fixes when scrolling to a certain y-offset).

Unfortunately, for iOS you can't do this easily (when you scroll, or flick, all JavaScript is halted, which is why position:fixed happens at the end of the event. If you're lucky, you could hope the user pans and position:fixed on touchmove...)

As you mentioned, there are workarounds where you apply overflow and mimic native scroll (iScroll, for instance). These work, but they're memory intensive (thank you, hardware acceleration for smooth scrolling) so performance could be an issue depending on your need.

For iOS 7, there's a value for position, which is sticky. This works really well, as demonstrated here:

http://html5-demos.appspot.com/static/css/sticky.html
http://caniuse.com/css-sticky

The only drawback is that it's limited to iOS 6.1 and 7. However, if older devices are not a concern, position:sticky is a great workaround since it's native solution.

Answer 3

Just try to make your blocks with inner scroll (overflow-y: scroll) and place them like inline-blocks near each other. So as a result you'll get independent scrollable content.