Баг со скроллом в iOS (iPhone/iPad) -webkit-overflow-scrolling:touch;

172
21 марта 2019, 23:40

При таком коде скролл прекрасно и плавно скроллит на iPhone , но , время от времени при касаниях и скроллах - скролл перестает работать вообще. Несколько раз потыкав по экрану, возвращается возможность скроллить. Что это может быть и как исправить?

p.s. Если убрать у overlay свойство -webkit-overflow-scrolling: touch; , ошибка пропадает. Но скролл становится деревянным.

$('button').on('click', function (e){ 
  $('#overlay').show(); 
  $('body').addClass('hidden'); 
}); 
 
$('#close').on('click', function (evt) { 
  $('#overlay').hide(); 
  $('body').removeClass('hidden'); 
});
#overlay { 
    display: none; 
    width: 100%; 
    position: fixed; 
    overflow-y: scroll; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.6); 
    z-index: 1000; 
  
    /*то самое свойство*/ 
    -webkit-overflow-scrolling: touch; 
    
} 
 
.hidden { 
  height: 100vh; 
  overflow: hidden; 
  position: fixed; 
} 
 
#popup { 
  background: #fff; 
  width: 80%; 
  margin: 0 auto; 
} 
 
#content { 
  font-size: 40px; 
} 
 
#close { 
  position: absolute; 
  top: 0; 
  right: 20px; 
  width: 170px; 
  height: 50px; 
} 
 
body { 
  background: url('https://image.freepik.com/free-photo/texture-background_1404-99.jpg') no-repeat center; 
  background-size: cover; 
  height: 600px; 
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<body> 
  <button>Open popup</button> 
  <div id="overlay"> 
    <div id="popup"> 
      <div id="content"> 
        content content content content content content content content content content content content           content content content content content content content content content content content content           content content content content content content content content content content content content           content content content content content content content content content content content content           content content content content content content content content content content content content           content content content content content content content content content content content content           content content content content content content content content content content content content           content content content content content content content content content content content content           content content content content content content content content content content content content           content content content content content content  
      </div> 
    </div> 
    <button id="close">Close popup</button> 
  </div> 
<body>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
Как выбрать option в select по значению?
HTML

Как выбрать option в select по значению?

Возможно ли указать значение option, которое будет выбираться по умолчанию при загрузке страницы? Пробовал через selected и selected="selected"Результат...

 199
Адаптивная вёрстка
HTML

Адаптивная вёрстка

вот код:

 244
Вывод рандомного числа, при нажатии на кнопку
HTML

Вывод рандомного числа, при нажатии на кнопку

Как вывести кнопку, при нажатии на которую выводится случайное число, но кнопка при этом не исчезает?

 196
Серые полосы в google maps
HTML

Серые полосы в google maps

 190