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.

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.

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

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