Why do hamburger menus break in iOS Safari?

Jared Tong
Jul 10, 2018 · 3 min read
Image for post
Image for post
The most intuitive way to code a hamburger menu. Also the wrong way.

Most hamburger menus don’t work on iOS Safari. If you try to over-scroll within most hamburger menus or click beyond them, Safari will refuse to scroll at all. Only on iOS. (tested on iOS 10 and 11)

Screen recording of a user’s session on the New York Times menu

Maybe most people will never click the hamburger menu. But for those who do, this is easy to trigger and extremely painful when encountered. Rage-inducing.

You can trigger issues in one of two ways:

  1. By over-scrolling within the hamburger menu
  2. By trying to scroll outside the hamburger menu element

Examples of sites with hamburger menu problems:

What’s the bug?

I haven’t figured out what the iOS Safari bug is yet. Let me know if you find the relevant issue on WebKit Bugzilla.

It’s related to scrolling within position: fixed and position: absolute elements or overflow: scroll elements.

What I do know is using position:fixed will definitely result in a subpar hamburger menu experience. Try this code example on an iPhone.

What’s the “fix”?

I found the “fix” first, since I needed to implement a hamburger menu myself.

But the workaround is essentially that when the hamburger menu is triggered to be shown, keep the hamburger menu as part of the normal <body> flow. Instead of positioning the menu, set the non scrollable main content to be positioned instead.

HTML

<body>

<nav class='sidebar'>
<!-- NAVIGATION LINKS GO HERE -->
</nav>

CSS

/* Arbitrary CSS variable values for explanatory purposes */
:root {
--sidebar-width: 100px;
--sidebar-bg-colour: blue;
}

You can see this used to great effect by Wikipedia, Disney USA, and ReferralCandy, where I work! Our implementations of the hamburger menu are scrollable, keep Safari’s satisfying rubber-band bounce on over-scroll, and will never refuse to scroll.

(Yes, I know the “better fix” may be to find an alternative UI like the tab bar. Hamburger menus have a bad rep for hiding key navigation elements. But if you implement the tab bar with a scrollable menu or dropdown, like Pitchfork does, you’ll still have the same problem.)

Request for Information

I know not everyone can implement the fix because they exist within legacy systems or have competing priorities; there is no shaming going on, only a plea for information.

Do let me know what others have discovered and how they’ve fixed it! And if it’s helped you improve your web app’s hamburger menu UX for iPhone users, let me know.

A variant of this article was also published on Dev.to. If you’re more of a beginner, you can find what is a hamburger menu and how to build a hamburger menu from scratch on my blog.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store