8

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.

Bruno Cloutier
  • 1,003
  • 2
  • 10
  • 11
  • 2
    After doing a bit of research, I found that Safari considers the div's bounding box (to register the scrolling behavior) to be the div's position before the transition is applied. In other words, if you put your mouse where the div was before the translation and use the scrollwheel, you will be able to scroll inside the div, even if it's not there anymore. I have yet to find a workaround though... – Bruno Cloutier Feb 03 '15 at 16:45

1 Answers1

18

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);
analog-nico
  • 2,750
  • 17
  • 25
  • Nice one, thank you! I had noticed that "refreshing" the div element (ex.: modifying content inside of it) would fix the issue. Your workaround is better. – Bruno Cloutier Feb 09 '15 at 15:29
  • That was my lead, too. Man, making a website work on every browser is such a hassle... ;)) – analog-nico Feb 10 '15 at 02:18
  • Thanks, that seems to work for me. too. (I'm using `webkitTransitionEnd`, btw.) – Pascal Sep 14 '15 at 14:14
  • This didn't work for me (with a nested 3d-transformed object). Try opening and then scrolling the nav on this codepen: https://codepen.io/hirasso/pen/ZErZLjO – rassoh Jun 20 '22 at 11:01