0

I'm having a problem with overscrolling a div in mobile safari. I have a nested structure with body { position: fixed }, inside which I have a parent and a child div. The container div has: .container { overflow-y: scroll; -webkit-overflow-scrolling: touch; } and a max-height property that is set dynamically by javaScript.

When I overscroll the container in mobile safari beyond the content of the child-div (kicking in the 'overscroll' or 'elastic / rubber-band' scroll effect, I get all kinds of jitters, as shown here:

bug

I've scoured SO and every other resource I could find but to no avail. One piece of info I feel is likely relevant:

If i disable scrolling on the element, I can drag the screen as if I was attempting to scroll and sometimes I can get the bottom of child content to disappear and reveal the background of the container div of about ~40px on iPhone. It's roughly the size of the control bar at the bottom, but appears ABOVE the control bar.

I also read in a deeply buried comment that there was once a bug with safari triggering resize events on scroll, but I've set event listeners to alert if a resize event is triggered to test, and haven't gotten that to occur.

I'm lost as to what to search for to remedy this. Ideas on what is causing this?

Note: FWIW, this is being built in React with create-react-app.

Hanzy
  • 394
  • 4
  • 17
  • Try to set top value of fixed body – Awais Feb 27 '20 at 07:48
  • @Awais thanks; I just tried that now but unfortunately no luck. :( – Hanzy Feb 27 '20 at 14:48
  • max-height property that is set dynamically by javaScript. IS that on document get ready? – Awais Feb 27 '20 at 16:31
  • @Awais it’s being set by a react component on render. Not sure if that helps. – Hanzy Feb 28 '20 at 04:29
  • oh sorry hanzy Do you have any live link of your web app Or did you tried you web app in responsive mode of web inspector? – Awais Feb 28 '20 at 05:45
  • @Awais sure thing; here is a link: https://hans-garon.firebaseapp.com It was nearly ready for release but in trying to fix this issue I’ve tried a lot of fixes and haven’t cleaned up all the code. Please disregard the console, all react dependencies were / will be accounted for. Also, it works quite well in responsive mode on desktop, but has the issue in WebKit browsers. – Hanzy Feb 28 '20 at 10:52
  • i had tested in responsive `dev` tool and its working fine there – Awais Feb 28 '20 at 11:04
  • @Awais yes I think it’s related to a safari bug. The scroll only gets janky on the elastic bounce in WebKit mobile browsers. I’ve tried all the hacks but nothing remedies. Even tried re-implementing one piece at a time and can’t tell which part introduces it. Maybe the rubber band scroll is processed in a way that doesn’t handle the repaint as efficiently, I’m not sure. :-/ – Hanzy Feb 28 '20 at 11:06
  • then may be you need to google more about the issue as far as i know i had suggest some one this link as a mobile scroll jerk on safari that helps him may be you had seen this link before https://stackoverflow.com/questions/24156709/choppy-scrolling-in-safari – Awais Feb 28 '20 at 11:19

0 Answers0