Website often refuses to scroll on iPhone (Safari)

Question

For some reason, my website often refuses to scroll, but only on iPhones.

Devices/browsers that do work:

• iPad (Safari)
• Android phones (Chrome)
• PC (Chrome (including DevTools emulation) & IE11)

Devices that show the bug:

• iPhone 4S
• iPhone 5
• iPhone 6

So clearly it is iPhone related.. It's like there's a timeout on scrolling only on iPhone. I'll try to describe the bug as good as possible.

After I load the site, I have to wait like 5 seconds before I can scroll. Then I scroll down a bit. During the scrolling, the scrollbar can be seen (as normal). When the scrollbar has faded, scrolling the opposite direction is blocked for like 5 seconds. When I scroll and scroll the opposite direction before the scrollbar fades, it scrolls as expected.

Also when I want to change scrolling direction, it's like I have to swipe twice to "initialize" scrolling. I have to scroll, wait, scroll to actually scroll that direction.

So:

• Scroll down (scrolls), wait, scroll down (scrolls) - same direction scrolls
• Scroll up (scrolls), wait, scroll up (scrolls) - same direction scrolls
• Scroll down (scrolls), scroll up (scrolls) - changing direction before scrollbar fades
• Scroll down (scrolls), wait, scroll up (nothing) - changing direction
• Scroll down (scrolls), wait, scroll up (nothing), wait, scroll up (scrolls) - changing direction, have to scroll and wait twice

At wait, I wait like 3 seconds. If I don't wait long enough when scrolling the opposite direction, it just doesn't scroll.

The website uses MeteorJS and jQuery. I've tried some mobile-utility scripts, like iScroll and FastClick, but they don't seem to help.

Answer 1

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.

Answer 2

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.