Solution 1 :

$("button").click(function() {
.overflow-hidden {
  height: 100vh;
  overflow: hidden;
<script src=""></script>

Problem :

Setting overflow hidden to html, body using jquery or css does not work in ios safari but works on safari on mac and all other browsers.

I tried looking for answers here : Overflow-x:hidden doesn’t prevent content from overflowing in mobile browsers. The answer explains to use a wrapper div with position: relative and add overflow: hidden to that div. This solution did not work for me.

There is also an answer which says to use position: fixed but the problem i have is that i need to use toggleClass to toggle between the overflows for a popup message to work but when i apply it using jquery the screen scrolls all the way up to the top.

I also tried adding a transparent position: fixed overlay with full width and height behind the popup but weirdly enough, the body/html in the background can still be scrolled through the overlay.

The issue can be seen on my website while in responsive mode by clicking the bottom right share button here:

Would there be a working way to hide/disable the overlay using jquery/css/html temporarily on event in ios safari?

i did not include the whole code because it would make the question longer and more confusing and i dont think including the code is necessary as my question only demands for a way to hide overflow or disable scrolling in ios safari where using overflow: hidden on body, html does not work. Please read :

Thankyou for the help 🙂


Comment posted by Xenio Gracias

please add your code so we can check what is going wrong. thanks

Comment posted by bl4ck120

i dont think the whole code is necessary because it will only make the question longer. its simply

Comment posted by bl4ck120

i apologize. i explained my issue in the very first line. Adding