no scrolling with MacBooks trackpad on (previously) animated lists

user_2978727 0
Viewed 1185

My Problem:

In my project, there is an animated container (named .uebersicht) who brings in some divs with a scrollable list. The animation flips (thanks david walsh) between two different lists in my app. Because both of them should be scrollable I have to flip and kick away the flipped container.

I have simplified my markup and CSS and made a fiddle - but the fiddle is working correct :D (maybe a good trace...) So I put it on a hosting service.

Nevertheless, for a better understanding I visualize my problem: drawing of my markup

(if you wonder about the different containers, they are important for the rest of the app)

My approach works well on touch and mouse interaction but the Mac trackpad (like the one in a MacBook) and maybe (could not test this) the magic pad and magic mouse on Mac are just able to scroll the container every 2nd/3rd/4th time.

It seems that Safari 12.0 under MacOS 10.13.6 tries to scroll the wrong container (window-element).

Reproduce the bug:

  1. check out the fiddle with a MacBook/MagicPad/MagicMouse
  2. set your system scrolling direction to not natural
  3. point in the yellow container and scroll down
  4. if this works (sometimes) move and click around (inside or outside the container) and try again

It seems that there is an area in the container where scrolling never works.

Why this is a SO Question:

You could argue that this is a Safari bug and nothing for SO. But when I'm using the animations from w3css (unfortunately there is no flip) scrolling works as expected.

Hints from the Comments here

  • When the div is scrolled to the top and you scroll up, the focus goes to the parent and you have to lift the fingers before you are able to scroll down
  • My trackpad setting is not natural (swipe down = scroll down) changing these setting to natural (swipe up = scroll down, this is standard) make my example work
  • When scrolling is blocked you can't even scroll with js using scrollTo etc. No scrolling event is fired

The question stays the same because I can not ensure that every user has the setting to natural and not not natural like me.

safari macos css html
3 Answers

I have got the bug on: MacBook Pro (15-inch, 2016)

Safari : Version 12.0 (14606.1.36.1.9)

I have added overflow: hidden to HTML, BODY and seems working. It might be related to locking the body while scrolling but not sure.

I can test it again if you update the code by adding 

html,body {
   overflow:hidden
}
user_97933100

It's very hard to reproduce and trace properly the issue, but what it seems to work on my Mac is to add overflow:hidden; also on the other two wrappers id="item1" and class="content". In that way the only thing that remains to scroll is the div you want to scroll. I think it could be worth to give it a try.

MacBook Pro (Retina, 15-inch, Early 2013) - OS 10.14.1 - Safari version Version 12.0.1. - trackpad natural and not not natural

Hope this help.

user_31190050

Finally after a few good comments here I found a solution but it is more likely a workaround (thanks for your input).

I played around with some eventListeners, capturing and bubbling. It seems that the scrolling goes down to the scroll element (capture) but is not bubbling up again. Listen to the scroll event and scroll via JS in the right direction until DOM is unblocked was getting to complicated. But if I modify the style (position/size) of the scrolling element .styleWrap .scrollable the blocking was gone !

After that it turns out that it prevents Safari from any blocking when I modify this element after the animation was finished.

So my workaround is to make a style change and revert that after the CSS animation has been finished - and voilà :

function slide(slideName){
    // scroll to top
    scroll(0,0);
    // show the Slide
    var slideElement = document.getElementById(slideName);
        slideElement.classList.add('show');
}

setTimeout(function(){
    slide('item1');

    // make a change to be able to revert this change
    var scrollDiv = document.querySelector(".scrollable");
    scrollDiv.style.top = "1px";

    // change some style (reset the prev. change)
    setTimeout(function(){
        document.querySelector(".scrollable").style.top = "";
    }, 1300 + 10); // CSS animation time + 10ms

}, 100);

Maybe this is the reason why the w3css animation does not lead into blocking...

You can test it here (I add more px to the topto make it more visible here): http://fiddle.bplaced.net/52426221g/

I'm not 100% satisfied with this solution because:

  • it is a CSS problem solved with JS
  • you need to know the animation timings (which can change with design)

Therefore I would like to change the accepted answer if there is a CSS solution

user_29787270
Related