Can't scroll inside a div after applying -webkit-transform in Safari

Question

I am building a slide menu.

The menu is long and I need to be able to scroll inside of it, so I have set overflow-y: scroll on it.

I am using -webkit-transform (and variants on other browsers) as the transition property.

Now I can't scroll inside the div, using the scrollwheel when on top of the div will make the whole page scroll.

If I change the menu's behavior and transition the right property (setting the menu to right: -320px and animating it back to right: 0), the scroll works.

This bug only happends in Safari, it works fine in Chrome and other browsers. Also works on iOS.

Anybody know a workaround? Anyone experienced this issue before? I can't seem to find any info on it. Thank you.

Answer 1

I had the same issue with the difference that I use an animation instead of a transition and overflow: auto instead of overflow: scroll.

This fixed the issue for me (el is the DOM element to which the animation is applied):

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

el.addEventListener('webkitAnimationEnd', fixSafariScrolling);