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

223

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>

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

239

HTML

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

вот код:

290

HTML

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

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

243

HTML

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

239