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

Answer 1

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

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

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.