Scroll lock for body while mobile menu is open is not working

I have found several other solutions that demonstrate how you can lock scroll behaviour for a website by using CSS overflow property. As such I have implemented this solution and added the overflow: hidden; to the body tag when the menu is open. However when using iOS Safari or Chrome the body is still scrollable.

CSS:

    body.opened-drawer {
      overflow: hidden !important;
      height: 100% !important;
      width: 100% !important;
      position: fixed !important;
      z-index: 0 !important;
    }

JS:

timber.openDrawerMenu = function () {
  var $mobileMenu = $('.nav-bar'),
      $mobileMenuButton = $('#menu-opener'),
      $body = $('body');
      $mobileMenuButton.addClass('opened');
      $mobileMenu.addClass('opened');
      $body.addClass('opened-drawer');

  // Make drawer a11y accessible
  timber.cache.$navBar.attr('aria-hidden', 'false');

  // Set focus on drawer
  timber.trapFocus({
     $container: timber.cache.$navBar,
     namespace: 'drawer_focus'
  });

  // Escape key closes menu
  timber.cache.$html.on('keyup.drawerMenu', function(evt) {
    if (evt.keyCode == 27) {
      timber.closeDrawerMenu();
    }
  });
}

timber.closeDrawerMenu = function () {

  var $mobileMenu = $('.nav-bar'),
      $mobileMenuButton = $('#menu-opener'),
      $body = $('body');

  $mobileMenuButton.removeClass('opened');
  $mobileMenu.removeClass('opened');
  $body.removeClass('opened-drawer');

  // Make drawer a11y unaccessible
  timber.cache.$navBar.attr('aria-hidden', 'true');

  // Remove focus on drawer
  timber.removeTrapFocus({
    $container: timber.cache.$navBar,
    namespace: 'drawer_focus'
  });

  timber.cache.$html.off('keyup.drawerMenu');
}