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.

Solution 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;
}

Solution 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.

Comments

[user3292653]

Hi, I found the problem, but I don´t have a solution for now. The problem is, that if you position a <div> with position:fixed; inside a body with "height:100%;overflow:auto", then it will look buggy. The fix for that would be using "height:auto". But a problem I couldn´t fix is that if you place the position:fixed; element on the same layer like another one with position:absolute.

[Timothy Owen]

I will add to this.. I spent too much time with this problem and figured out that you HAVE TO SCROLL WINDOW. That is, the WINDOW object. If anything else is scrolling you will have issues.