Overflow hidden don't prevent scrolling on IOS if you use Position Fixed. SlidingPanel and Modal affected

[leandrooriente]

Browsers and versions affected

IOS

Description

Overflow hidden don't prevent scrolling on IOS if you use Position Fixed. SlidingPanel and Modal affected.

If you add overflow hidden to body element and add a Fixed element on it, it will not prevent the body to scroll.

Steps to reproduce

Open a modal or slidingPanel on IOS and try to scroll, the body will scroll together.

Expected results

Body should stay at the same position if we scroll a fixed element on it.

External references

• StackOverflow: https://stackoverflow.com/questions/37713970/ios-css-js-overlay-scroll-but-prevent-body-scroll

Could be a solution
https://github.com/willmcpo/body-scroll-lock