Cannot scroll inside div after applying -webkit-transform in Safari

Question

I am creating a slide menu.

The menu is long and I need to scroll it, so I set overflow-y: scroll it.

I use -webkit-transform (and options in other browsers) as a transition property.

Now I can’t scroll inside the div using the scroll wheel when the whole page scrolls over the div.

If I change the behavior of the menu and go to the correct property (setting the menu to the right: -320px and animating it to the right: 0), scrolling works.

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

Does anyone know a workaround? Has anyone experienced this question before? I can not find any information about this. Thanks.

Answer 1

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

This fixed the problem for me ( el is the DOM element to which the animation applies):

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