iOS 15 safari toolbar now hides when scrolling within an element

Question

Created Sep ’21

Replies 5

Boosts 0

Views 7.7k

Participants 5

On iOS 15 scrolling within an element causes the window to resize / toolbar to disappear, regardless of if you have the top or bottom toolbar. On iOS 14 this would only happen when the body scrolled. See gifs below, note - the yellow area is a div with overflow scroll and the body is not scrolling.

iOS15: https://i.stack.imgur.com/ctXmi.gif

iOS14: https://i.stack.imgur.com/9QcC2.gif

Code example here: https://codesandbox.io/s/ios15-scroll-example-u7toi

Is there any way to disable it as it isn't always desired & is causing some strange glitching on my website.

Boost

Answer 1

odedsh3 OP

Nov ’21

Same issue here. Any solution?

0

Answer 2

thelevicole OP

Nov ’21

I have a similar issue: https://stackoverflow.com/questions/70036242/ios-15-overflow-issue-for-fixed-elements-when-tab-bar-is-positioned-top

0

Answer 3

erasmo-marin OP

Jan ’22

Same issue, some dependencies used to block the scroll are not working with this new version, and all the solutions available are very hacky. Fix this is critical for modals/popups.

Also I have seen very weird behaviors with some libraries that implements dragging with javascript. This change is causing those weird behaviors.

0

Answer 4

firstAndres OP

Jan ’22

Hello. I solved this problem for my case. Perhaps it will help you too.

body-scroll-lock library https://github.com/willmcpo/body-scroll-lock

Video examples of work:

Before using the library (pain): https://truewebstories.ru/sites/default/files/0my_files/blog/2022/scroll-safari-15/before.MP4
After: https://truewebstories.ru/sites/default/files/0my_files/blog/2022/scroll-safari-15/after.MP4

I block everything except the "burger menu" (side menu) from scrolling after that menu is opened. When the menu is closed, all scroll locks are released.

Thanks willmcpo https://github.com/willmcpo and google translate...

PS: Read this issue https://github.com/willmcpo/body-scroll-lock/issues/236 It says that if you install the library through NPM, the problem will not be solved. You need to download it from GitHub - then it will be OK.

0

Answer 5

firstAndres OP

May ’22

Second brilliant solution: Use touch-scrolling in JS (without CSS: overflow: auto and the like).

For example, look at the library: flickity - it has a mode: freescroll.

https://flickity.metafizzy.co/options.html#freescroll

Safari's real trick: it doesn't know we're scrolling.

0