iPad и iPhone игнорируют overflow: hidden у html. Как исправить?

$('.js-toggle').on("click", function() { 
 
  if ($('nav').offset().top > 0 && !$('.sub').hasClass('active')) { 
    window.scrollTo({ 
      top: $('nav').offset().top, 
      behavior: "smooth" 
    }) 
  } 
 
  if (!$('.sub').hasClass('active')) { 
    $('.sub').addClass('active'); 
    $('html').addClass('no-scroll'); 
  } else { 
    $('.sub').removeClass('active'); 
    $('html').removeClass('no-scroll'); 
  } 
});

* { 
  box-sizing: border-box; 
} 
 
.x-layout { 
  display: flex; 
  flex-direction: column; 
  min-height: 100vh; 
  max-width: 1200px; 
  width: 100%; 
} 
 
.header { 
  background: #eaeaea; 
  height: 200px; 
} 
 
.nav { 
  background: lightcoral; 
  height: 50px; 
  display: flex; 
  align-items: center; 
  padding: 0 30px; 
  position: relative 
} 
 
.content { 
  background-color: lightblue; 
  flex: 1; 
} 
 
.paragraph { 
  margin-bottom: 80px; 
} 
 
.sub { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  background: lightcoral; 
  padding: 30px; 
  width: 100%; 
  position: absolute; 
  top: 100%; 
  left: 0; 
  height: calc(100vh - 50px); 
  display: none; 
} 
 
.sub li { 
  padding: 15px; 
} 
 
.sub.active { 
  display: block; 
  overflow-y: scroll; 
} 
 
.no-scroll { 
  overflow: hidden; 
  position: fixed; 
  width: 100%; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="x-layout"> 
  <header class="header"> 
    header 
  </header> 
  <nav class="nav"><button class="js-toggle" type="button" name="toggle-menu">Click!</button> 
    <ul class="sub"> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
      <li>Item 5</li> 
      <li>Item 6</li> 
      <li>Item 7</li> 
      <li>Item 8</li> 
      <li>Item 9</li> 
      <li>Item 10</li> 
      <li>Item 11</li> 
      <li>Item 12</li> 
      <li>Item 13</li> 
      <li>Item 14</li> 
      <li>Item 15</li> 
      <li>Item 16</li> 
      <li>Item 17</li> 
      <li>Item 18</li> 
      <li>Item 19</li> 
      <li>Item 20</li> 
    </ul> 
  </nav> 
  <main class="content"> 
    <p class="paragraph">lorem</p> 
    <p class="paragraph">lorem</p> 
    <p class="paragraph">lorem</p> 
    <p class="paragraph">lorem</p> 
    <p class="paragraph">lorem</p> 
    <p class="paragraph">lorem</p> 
    <p class="paragraph">lorem</p> 
    <p class="paragraph">lorem</p> 
    <p class="paragraph">lorem</p> 
    <p class="paragraph">lorem</p> 
  </main> 
</div>