Sidenav preventScrolling not working on mobile Safari

[ivanBell199]

Expected Behavior

Area outside sidenav should not be scrollable.

Current Behavior

Everything is OK on PC and iPad, but on iPhone Safari the body reacts to scrolling within sidenav. Because of that the scrolling experience is bad, sometimes I cannot even scroll to the bottom of the nav. In my case this is important since there are some inputs at the bottom that must be accessible.

Your Environment

Materialize 1.1.0-alpha
iOS 12.5.4

[ivanBell199]

After some research I found a thing that doesn't solve the problem completely but makes it a bit better. If we add -webkit-overflow-scrolling: touch; to .sidenav, then at least the body does not react to scrolling within the sidenav. So if I make a touch and scroll within the sidenav, it only affects the sidenav. If I make a touch outside of it, then it scrolls the main part of the content. It seems that this property does not spoil anything on PC, so maybe you will decide that it should be in the CSS.

[LoganTann]

I think I experienced such issue three years ago on android too
unfortunately, I don't know if there is a way to properly fix this issue. Maybe we can look to other libs to check if there is the same issue, and how to fix it in our component.

[ivanBell199]

I am an amateur in coding, but it seems this resource may be useful:
https://github.com/willmcpo/body-scroll-lock

I have tried it and it works for my iOS. Here is a codepen

[gselderslaghs]

Thanks for your report

I've run some diagnostics on your concerns, this is the outcome:

• This issue applies only to iOS 12.x or below, in all newer versions I'm not experiencing this issue

I'll try to find a solution how we can fix support for older versions when I have time