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.
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.
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.
Need help with an upcoming project?
I'd love to hear more about what you have coming up and how I can help bring it to life! My earliest availability is currently Mid-October 2023.Get in Touch