Question

126

Website often refuses to scroll on iPhone (Safari)

rated 0 times [ 132] [ 6] / answers: 1 / hits: 25705 / 9 Years ago, thu, april 9, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

maxinec

Add To Favorites

Follow

Total Points: 117

Total Questions: 116

Total Answers: 116

Location: Bangladesh

Member since Sat, Jan 23, 2021

3 Years ago

answered 9 Years ago marisela · Accepted Answer

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.