5

Inside a position: fixed; element, scrolling elements will "lock" if you try to scroll them the wrong way at the start of a touch.

Example: touch the screen and drag downwards, then back up. The element won't scroll. If you release, wait a few seconds, then try dragging upwards, it will scroll.
http://12me21.github.io/scroll-test.html

body {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}
#scroll-container {
   overflow-y: scroll;
   height: 100%;
}
#scroller {
   height: 200vh;
   font-size: 50px;
}
<body>
   <div id=scroll-container>
      <div id=scroller>Test<br>more text</div>
   </div>
</body>

This answer: https://stackoverflow.com/a/51733026/6232794 seems to be the same problem I'm having, but the fix no longer works. It seems to happen inside all fixed elements and isn't caused by -webkit-overflow-scrolling: touch; anymore.

Is there any way to fix this now? Or do I just need to avoid position: fixed; entirely?

12Me21
  • 741
  • 8
  • 18
  • might be duplicate / related to https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi?rq=1 – 12Me21 Apr 01 '22 at 00:25

1 Answers1

5

Adding overflow: hidden; to <html> or <body> seems to fix it.
I'm not sure why this works, but I assume the problem is that safari is trying to scroll html/body instead of the element you want.
Because the scrollable section is inside a position:fixed element, scrolling the body has no visual effect, so it looks like nothing is happening.

12Me21
  • 741
  • 8
  • 18