What do The New York Times' developers get wrong about the hamburger menu, and what do Disney's and Wikipedia's get right?
As far as I know, I'...
For further actions, you may consider blocking this person and/or reporting abuse
I just use this to lock the body on mobile:
github.com/willmcpo/body-scroll-lock
and the css
overscroll-behavior: contain;to prevent overscrollIt's probably worth noting overscroll is still in the draft phase even if support is surprisingly good.
There are a lot of "drafts" already implemented. They do it for mainly two reasons:
My view: in a lot of cases you could get rid of the navigation altogether.
If your page has good UX and leads you through journeys effectively then in theory your user would never need to open up a menu to find something. If they do need to then search should be sufficient.
We were toying with the idea of a conversational UI in a recent project where the user would only have access to a search bar which would filter the content on the page. Never got to test this idea but it definitely solves the burger problem!
Apple should fix their scroll issues. iOS and scrolling is a nightmare to work with.
Safari in general is a nightmare, both on desktop and mobile
So many obscure bugs.. It does have good js and css support though, so it's a double edged sword.
Safari: It just works! Until one day, the screen turns white for no apparent reason and you have to do something completely nonsensical to fix it.
Had to put in a crazy hack the other day as Safari doesn't calculate the scroll height correctly when images spend some time loading and the resulting scroll height is less than 100vh (100vh doesn't take the address bar into account). This hid some necessary navigation and rendered the app unusable in this very specific edge case.
To fix it I used a capturing load event listener and set position fixed before resetting the positioning. Nasty business.
I was expecting the answer to be "implementing a hamburger menu to start with".
There are some good alternatives available.
Working fine on Android :)
NYT and Gab both have issues in Chrome on Android.
For NYT, the page content scrolls when the hamburger menu over scrolls.
For Gab I was sometimes able to scroll in the sliver of content on the right. After that, menu scrolling was broken and I was even able to scroll horizontally with the menu open, which was weird.
Given that iOS is the lesser-used mobile operating system, I'd say it's up to them to fix their bugs, not up to all the web developers to work around Apples behavior.
It's also worth noting that you're on an iPhone and it's common sense to add a class to see the body to fixed whilst the menu is open.
iOS momentum scrolling.
-webkit-overflow-scrolling: touch;