-webkit-overflow: touch; stops working when tapping on element outside of scroll container

Question

I have a really big bug on the iphone, that makes a page unusable and I just can't solve it. I can't find any topic about this issue as well.

I have the following screen:

In the middle, there is a div, which is set on -webkit-overflow: auto; to have smooth scrolling inside this div. The scrolling is working absolutely fine and smooth.

BUT only until I do a touchmove on another element outside of this div. If I do this and try to scroll the scrollcontainer again, it's frozen and not moving at all. After I tap around a few times on the scroll container it's scrolling again. It's losing the scroll focus of the scroll container and trying to scroll a parent.

So, if I do a movement like this:

This looks like this :

Note: I'm just doing one touchmove from the bottom container into the overflow div. After releasing the finger and then trying to scroll again, it still scrolls the parent div.

I made a short example, so you can have a look with your iphone/phone here.

This issue only appears when using -webkit-overflow: auto With normal overflow: scroll it's always working but yes... you know how laggy this scrolling feels.

Is there any way to force the scroll focus in the desired container, when you're clicking/tapping a container with -overflow-scrolling: touch;?

That is just how iOS and Safari work. You should be able to see the same result in macOS' Safari, while in Chrome, it should not happen. What you might be able to do is disable body scrolling. That might work. — LinusGeffarth, Apr 20 '18 at 06:47
Hello, thanks for the answer, actually I've blocked body scrolling and it still didn't work. — Czeran, Apr 20 '18 at 06:52
@LinusGeffarth Thanks but body scroll is absolutely disabled by position fixed, width and height at 100% — user3561012, Apr 20 '18 at 06:53

Manuel Otto · Answer 1 · 2018-04-25T14:04:12.840

15

The iOS Safari Browser never really gives you full control over the scrolling. However there is a "hack" you can use, it requires JS tho:

set position: fixed on body,html
As soon as a touchmove occurs, set the body.scrollTop = 0 So in your case add:

CSS

body, html {
  margin: 0;
  position: fixed;
}

JS

document.addEventListener('touchmove',function (){
  document.body.scrollTop = 0
})

Example page for testing on device

Btw, a better way for handling this would be to make the headline/controls fixed and add a padding to the scrollcontainer. This wouldnt require any JS. try it

edited Apr 25 '18 at 14:04

answered Apr 25 '18 at 13:58

Manuel Otto

6,410
1
18
25

Works perfectly. Thank you so much. – Zaslam Sep 04 '19 at 20:56
OMG, googleing for hours and days with no success and now found this simple solution, 1+ – ddlab Mar 06 '20 at 14:00

score 2 · Answer 2 · answered Apr 25 '18 at 04:50

I too had this issue, my website worked fine on android phones, but on ios, i had to tap few times, to activate scroll.

I tried disabling body scroll, even tried this

-webkit-overflow-scrolling: touch; /* Lets it scroll lazy */

-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */

I had to use custom scrollbar plugin mCustomScrollbar

This plugin completely overrides the system scroll. Here javascript controls the positioning of the scroll content. It makes the content position:relative and uses top to scroll the content.

If this plugin doesn't work for you, you can try any other scroll plugin. They all work the same way.

Thanks for the comment, we had a custom scroll in the project and we resign because of few issues. I found that overflow-scrolling: auto resolve issue but then scrolling performance is very bad. I think that this is iOS Safari issue ;/ — Czeran, Apr 25 '18 at 08:53

-webkit-overflow: touch; stops working when tapping on element outside of scroll container

2 Answers2