Website Often Refuses To Scroll On Iphone (safari)

October 21, 2024 Post a Comment

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 emula

Solution 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.

Solution 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.

Solution 3:

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);

Solution 4:

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

Solution 5:

Solved adding

-webkit-overflow-scrolling: touch;

to container class as suggested here

Html5 School