Website often refuses to scroll on iPhone (Safari)

Ok so I started commenting stuff out for hours, just to find out that the thing that was blocking the scrolling was the menu.

I have a menu, hidden in the background with the following styles:

menu {
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow-y: scroll;
}

I really thought that having a z-index of -1 made it non-interactable when stuff with a higher z-index is in front of it, but apparently it doesn't on iPhone (on Android it does..).

Changing overflow-y: scroll; to hidden when the menu isn't open (and scroll when the menu is open) fixes it. Also a good idea is to just hide the menu altogether.

EDIT: I've spoke to Apple about this bug. They acknowledged its existence but decided not to prioritize it for now. If this bug is hurting you, please comment on https://bugs.webkit.org/show_bug.cgi?id=169509.

What the bug is:

The problem for me occurs only when you reach the beginning/end of the scrolling layer and then the beginning of your next gesture goes in the same direction. Then the webkit wheel event decides that it can't go that way and doesn't let you scroll at all.

There is a workaround for this: never let your scrolling layer reach the beginning or end of the scroll!

div.addEventListener('scroll',() =>
    div.scrollTop = Math.max(1, Math.min(div.scrollTop,
                                         div.scrollHeight - div.clientHeight - 1));
);

I hope some people still involved in webkit can fix this (I'm a bit retired from browser code), it's hurting scrollable layers on ios everywhere.