CODEWITHSUNDEEP
javascripthtmlcssiphone
Richard de Wit
Richard de Wit

Reputation: 7452

Website often refuses to scroll on iPhone (Safari)

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

Devices/browsers that do work:

Devices that show the bug:

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:

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.

Upvotes: 16

Views: 27410

Answers (5)

P.O.W.
P.O.W.

Reputation: 2215

Solved adding

-webkit-overflow-scrolling: touch;

to container class as suggested here

Upvotes: 0

HazeyAce
HazeyAce

Reputation: 381

I encountered a similar issue for iOS.

After a lot of hair was pulled out, I found a solution that worked for me: response by Wes R

The idea is that you listen for a touchstart event, capture the touch's Y position, listen for the touchmove, capture that touch's Y position, to work out the touch direction. If at the top already, and the direction is 'up' then event.preventDefault() to stop the browser attempting to scroll up, do same for scrolling down at the bottom of the page.

It was for a similar issue with same direction scrolling while at scroll boundary, sorry if it's irrelevant for your use case, I might've misunderstood OP :P

Upvotes: 1

Hayk Ghonakhchyan
Hayk Ghonakhchyan

Reputation: 11

I had the same problem with the menu scroll, often it refused to scroll after menu container changed its size (problem causes only in iPhone). I found the solution in my case, just toggling the css overflow styles. Like I had on container these styles

.container {    
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 280px;
    overflow-x: hidden;
    overflow-y: auto;
}

After every opening the menu just run this script

$('.container').css('overflow-y', 'hidden');
setTimeout(function () {
  $('.container').css('overflow-y', 'scroll');
}, 50);

Upvotes: 1

Noam Rosenthal
Noam Rosenthal

Reputation: 71

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.

Upvotes: 7

Richard de Wit
Richard de Wit

Reputation: 7452

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.

Upvotes: 7

Related Questions