Невозможно прокручивать внутри div после применения -webkit-transform в Safari

Question

Я создаю меню слайдов.

Меню длинное, и мне нужно прокручивать его внутри, поэтому я установил overflow-y: прокрутите его.

Я использую -webkit-transform (и варианты в других браузерах) в качестве свойства перехода.

Теперь я не могу прокручивать внутри div, используя колесо прокрутки, когда поверх div будет прокручиваться вся страница.

Если я изменяю поведение меню и перехожу к правильному свойству (настройка меню справа: -320px и анимирование его вправо: 0), прокрутка работает.

Эта ошибка происходит только в Safari, она отлично работает в Chrome и других браузерах. Также работает на iOS.

Кто-нибудь знает обходное решение? Кто-нибудь испытал этот вопрос раньше? Я не могу найти никакой информации об этом. Спасибо.

Answer 1

У меня была та же проблема с той разницей, что я использую animation вместо transition и overflow: auto вместо overflow: scroll.

Это исправил проблему для меня (el есть элемент DOM, к которому применяется анимация):

function fixSafariScrolling(event) { 
    event.target.style.overflowY = 'hidden'; 
    setTimeout(function() { event.target.style.overflowY = 'auto'; }); 
} 

el.addEventListener('webkitAnimationEnd', fixSafariScrolling);