New Fixed position bug on iOS8

Question

I have a site with a fixed header and slide-out sidebars. With iOS7 in portrait orientation, the fixed header stays fixed when the sidebar is visible, but on iOS8 the header pushes slightly upward depending on how far down you are scrolled. I need it to stay fixed.

See this jsbin: http://jsbin.com/xuyevi/2/

The main pieces are a header, a sidebar, and the main content. The header is fixed to the top of the screen using fixed position and has a z-index that keeps it above the content when you are scrolling.

The sidebar is fixed to the left side of the screen, and is initially hidden by being translated left by its own width.

To open the sidebar, each of the header, content, and sidebars are translated to the right by the width of the sidebar.

Again, this works perfectly on iOS7 and all other browsers that support translate3d, and it even works correctly in iOS8 when in landscape orientation. But in iOS8 in portrait, the fixed header will slide off the screen based on how far down the user is scrolled.

Further, using the Safari inspector shows that the menu items on screen are offset from their expected positions. I.e. selecting an element in the inspector highlights an area on the screen that is offset from the actual location where it's rendered.

Has anyone else run into this? Anyone know a fix?

EDIT: The inspector thinks that the fixed position header is exactly where it should be, even though it's actually getting pushed off screen.

Kestrel

I am encountering this as well. I noticed that when using position: fixed the container width was about 4/3 bigger than its parent. Using position: -webkit-sticky didn't have this problem, but didn't work in my case (had trouble with opacity / background-image). If/When I solve this I'll post an answer here. – Grey

I solved this for our site by moving from a 'push' to a 'slide over' effect. The main content now stays put while the sidebar and header slide in over it. I'd prefer to go back to the push if I can, but right now I don't have the time to spend fiddling with what seems to be a bug in iOS8. – Kestrel

Answer 1

A little late to the party, but adding

html, body {
    overflow-x: hidden;
    overflow-y: scroll;
}

Will fix the offset scrolling on fixed elements that are offset (eg. left:20px) in iOS 8.

Leathern

This worked for me, however it created some performance problems for me -- very slow scrolling on certain pages. – Jammiejammin

@Jammiejammin try the following: overflow-y: auto; -webkit-overflow-scrolling: touch; // momentum scrolling on iOS – Sung

@mwld, Thanks for the tip -- FYI product already shipped with a different solution, but I'll definitely give that a shot next time I need it. – Jammiejammin

Answer 2

I had a similar issue on iOS using multiple fixed position elements and a CSS animated off-canvas nav. On a long page the upward "drift" was a blocker because it eventually increased to the point where it hid the nav trigger, making it impossible to close the menu. I tried extensively to find a fix and settled on a workaround: scroll back to top before animating. (#ocnTrigger is my off-canvas menu trigger.)

$('#ocnTrigger').click(function(){
    $('body').animate({
      scrollTop: 0
    }, 0);
});

Decasyllable

Answer 3

I was trying to do something similar (see here and here) then found that Apple has published a technical note recommending that fixed positioning be avoided. I swear it worked fine in iOS 7, but now with iOS8 it no longer "sticks".

This problem seems closely related to setting this meta tag:

    <meta name="viewport" content="width=device-width">

See also: Fix div to bottom without using css position

Grey