Off-canvas Menu + Fixed Navbar = Buggy iOS Safari

While working on a responsive refresh of the Upshot website I came across some buggy behavior when mixing an off-canvas menu with a fixed position element on the page. I realize that fixed elements have had a history of bugginess in iOS and detailed articles have already been written. However, I hadn’t seen what was occurring for me discussed anywhere yet. In this case the fixed position element contained the “hamburger” menu link and the logo so we wanted that to stay fixed to the top of the page, but interacting with the off-canvas menu was problematic.

The Issue#anchor

In the screenshots to the right you can see what the page looks like on load (left image) and what it looked like occasionally after sliding the off-canvas menu out and back (right image). Sometimes it was fine and others were even worse than this screenshot, very random.

The Fix#anchor

To fix (so far it appears to be fixed in iOS7 Safari from my tests) I added a left: inherit; to the fixed menu. Easy fix but figuring it out took longer than I care to admit.