Scrolling content inside a fixed position div on mobile Safari suddenly stops – and starts scrolling the container itself

Question

I have a container which has position:fixed with scrolling content inside. I'm displaying this as a chat feature on mobile devices but on mobile Safari, the scrolling content inside the position:fixed container stops scrolling suddenly and starts to scroll the container itself.

Open this link on mobile Safari to see the effect: http://jsbin.com/ruyito

Editable example here: http://jsbin.com/ruyito/edit?html,css,output

The question: Why does my container div start to scroll its position suddenly and stop scrolling the content? (On Chrome on Android, it works without issue)

Note: if you're having trouble triggering this bug, keep scrolling the content up and down quickly for 10 seconds or so, eventually it will suddenly stop scrolling.

Answer 1

I've come across this issue several times when trying to use use overflow: scroll div's in iOS Safari.

My understanding it that it's to do with the overscrolling/elastic scrolling animations. What seems to happen is:

1. When a certain container (i.e. the window, or your scrolling div) is running these animations the events get locked to that container.
2. When an overflow: scroll container hits the top/bottom of it's scroll height it then starts scrolling the parent container - this is also the case in Chrome.

You may notice in your example that when the scrolling stops working, not touching the screen for a small amount of time (say 500ms?) then trying to scroll again works.

What I think is happening is that when you hit the bottom/top of your scrolling container, the events are getting locked to the parent, in this case the window. While you keep interacting in this state, your events never make it to your scrolling container, and so it appears to be unresponsive.

I've had some success in the past by not propagating the touch events from my scrolling container up to the document:

$('.chat-container-mobile').on({
    'touchstart': _onTouchStart,
    'touchmove': _onTouchMove,
    'touchend': _onTouchEnd
});

function _onTouchStart(e) {

    e.stopPropagation();
}

function _onTouchMove(e) {

    e.stopPropagation();
}

function _onTouchEnd(e) {

    e.stopPropagation();
}

Note: This will not be a fix in many situations, as you often need to retain default window behaviour. In this case though, you seem to have a fixed layout which doesn't require default document scrolling behaviour. Additionally, you will likely still see the same result if you attempt to scroll by touching on the top 'Group chat' bar or bottom 'Type message' bar, then quickly afterwards try to scroll within your container.

You could also try using e.preventDefault on $(document) for these touch events. This prevents the window from reacting to these user inputs in the first place, again though this can cause many other problems if you need to retain browser defaults.

Also try to localise these bindings only in situations where it's a problem. So check for iOS and Safari before binding onto the events.

I'll come back with any extra findings the next time I try to deal with the the problem - which, let's be honest, is almost every project.

Good luck!

Answer 2

Just try to add bottom:0 to .chat-container-mobile { bottom:0 }