1

This is happening on iphones in chrome and safari - I can't duplicate it on any other systems but can't seem to find a fix on the iphone.

I've created a slide out hamburger menu for small screens; using position:fixed. It works quite well, except on the iphone. That doesn't matter if it's chrome or safari. The menu slowly scrolls off screen the top of the screen as you scroll down the page. I'm using query to remove and re-dd negative margins to hide and show it, and add a negative margin to the content window so it slides the content off to the side.

If I don't use a negative margin on the content window (via #wrapper), then the fixed window stays where it should, pinned to the top. But the content in #wrapper is squished to the remaining width of the screen, rather than continuing to appear to have slide to the side along with the menu.

It seems to be affecting all instances of fixed, as the sticky menu ALSO scrolls off the screen. It's almost as if the 0 point is changing as you scroll.

I am stumped beyond stumped. I can't figure out if this is a bug or if I'm missing something here. I've tried so many ways to fix it and come up empty handed every time. Complication, I can't duplicate using simple html and css, but I can't find anything wrong. I've tried with dev tools in safari using the iphone link; and that's how I found the negative margin issue, but I can't seem to solve.

It's not jquery, because that's not setting the top, but I also turned off the functionality, and just had the code start with the negative margin on #wrapper, and the menu scrolls off the screen. Also of note, a small negative margin doesn't cause the problem; it has to be a large negative margin.

The containers that seem involved div#wrapper, div#MobileNav, div#NavBar and body. div#MobileNav and div#NavBar are fixed position outside the wrapper and inside the body tag.

The url is here: http://fusedjaw.terminus13.com/ and you should be able to duplicate on any idevice smaller than 480px. I also have screen captures here: https://i.stack.imgur.com/oMcC1.jpg

The arrow points to how the fixed menu "shifts" when opens. The jquery is adding a .open class to the wrapper which adds the negative margin that seems to throw everything out.

The second is when scrolled all the way to the top, where it seems to honor the true 0 position.

Tami
  • 3,221
  • 2
  • 18
  • 15
  • Not sure if this helps or not, but the bigger the negative margin, the more the top/0 point for position:fixed seems to offset. I just noticed this now. – Tami Dec 18 '16 at 01:12
  • Can't reproduce this issue in Safari on iOS 10.1, or Safari 10.0.1 for macOS Sierra. What version are you seeing it on? – Jon Uleis Dec 18 '16 at 01:44
  • Safari on ios 10.1.1 and ios 9.3. Are you scrolling far enough down to see the effect? It only happens when the drawer is open. I've not tried it on macOS, but it doesn't happen on any desktop device I've tried. – Tami Dec 18 '16 at 01:50
  • Oh, there it is! Scrolling further was the key. Will let you know if I find anything. – Jon Uleis Dec 18 '16 at 01:50

1 Answers1

1

Looks like an iOS bug with fixed positioning, scrolling and offsetting using left/etc. (I wonder if using transform/translateX would be better?)

I found a relevant SO thread from last year with a fix that worked for me on your site: https://stackoverflow.com/a/31879732/4573410

Specifically, adding this in the debugger fixed the drifting issue on iOS Safari:

html {
  overflow-x: hidden;
  overflow-y: scroll;
}
Community
  • 1
  • 1
Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
  • 1
    What a weird problem. I was able to fix it by just using overflow-y:scroll on html. I think you are right about using transform: translateX; but there is no reason a negative margin like this shouldn't work. Thanks for the tip on the earlier bug. – Tami Dec 18 '16 at 18:48