Overflow scroll not working on mobile in an overlay div

I built an overlay which opens when pressing a button through JS . When the overlay is open html is set to "overflow: hidden" and body to "bind touchmove". When going back everything goes back to overflow scroll and touchmove unbind. I tried using a mediaquery to set the overlay to have overflow:scroll on mobile and even to add the class via JS but it is not working. It works on mobile resolution from my computer but not when I browse it from my phone.

Here's the JS:

$('#button-overlay').click(function(){
   $(this).toggleClass('active');
   $('#overlay-alicorno').toggleClass('open');
   $('html').css('overflow', 'hidden');
   $('body').bind('touchmove', function(e) {
   e.preventDefault()});
   });

and the css of the overlay:

#overlay {
  position: fixed;
  background: #eeeae1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s, height 1s;
  z-index: 100;
}
#overlay-alicorno.open {
  opacity: 1;
  visibility: visible;
  height: 100vh;
  overflow: scroll;
}