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

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

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

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

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

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

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

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


scroll safari overflow webkit-transform
person Bruno Cloutier    schedule 02.02.2015    source источник
comment
Проведя небольшое исследование, я обнаружил, что Safari считает ограничивающую рамку div (для регистрации поведения прокрутки) позицией div до применения перехода. Другими словами, если вы поместите мышь туда, где был div до перевода, и используете колесо прокрутки, вы сможете прокручивать внутри div, даже если его там больше нет. Хотя мне еще предстоит найти обходной путь...   -  person Bruno Cloutier    schedule 03.02.2015
comment
У меня такая же проблема. Вы нашли решение?   -  person analog-nico    schedule 08.02.2015

Ответы (1)


arrow_upward
16
arrow_downward

У меня была такая же проблема с той разницей, что я использую 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);
person analog-nico    schedule 08.02.2015
comment
Хороший, спасибо! Я заметил, что обновление элемента div (например, изменение содержимого внутри него) решит проблему. Ваш обходной путь лучше. - person Bruno Cloutier; 09.02.2015
comment
Это тоже было моим преимуществом. Блин, заставить сайт работать в любом браузере - такая проблема... ;)) - person analog-nico; 10.02.2015
comment
Спасибо, это, кажется, работает для меня. слишком. (Я использую webkitTransitionEnd, кстати.) - person Pascal; 14.09.2015