Safari / Webkit CSS scroll-snap bug?

user_646163 0
Viewed 4271

I can't seem to make scroll-snap work properly on Safari (either desktop or iOS).

The bug (?) happens when an item's content is taller than the viewport, in which case Safari snap-scrolls right away to the next item making it impossible to read the contents of an item with a long text. This is not the case on Chrome, Firefox or Opera where it's possible to scroll throughout any long snapping section and the snapping to the start of the next item will only occur at the bottom of that long item (making it possible to be read).

Here is a Demo: https://codepen.io/xfze/pen/YzWXdQv

relevant code used:

ul {
    max-height: 100vh;
    overflow: scroll;
    scroll-snap-type: y mandatory;
}
li {
    scroll-snap-align: start;
}

as anyone ever got around this and got Safari behaving as Chrome/Firefox/Opera?

safari scroll webkit cross-browser css
2 Answers

Actualy safari made it correctly while the other are just making kind of proximity.

So even if I understood you don't like proximity, the way you are expecting to be mandatory do not make sens, let me explain.

mandatory is trying to fix view always to the the start of the child when you set scroll-snap-align: start; that means that child height must be max-height: 100vh; to have a right effect.

Because if you don't then the user won't ever be able to read the bottom of the li, try to make it with your demo, you will see, that it goes straight up to the next li when it is entering to the screen.

So based on what you wish, I would suggest you set:

  • Either you set proximity
  • Either you set li{ max-height: 100vh; overflow-y: auto; } and set the content into a div. But really hard to manage for user.
  • Either you use jQuery old way as below demo

Have a look to: CSS TRICKS SCROLL SNAP

DEMO with pure jQuery:

var items = $(".item");
var animating = false;

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    if (!animating) {
        $.data(this, 'scrollTimer', setTimeout(function() {
          var count = 0;
          items.each(function(key, value) {
            /** Adjust the 200 value to make scroll larger than 200px before and after the top of the item **/
           /** You can even make the value dynamic depending on screen by getting the viewport height and apply a percentage to it. ie: $( window ).height() * .8 ; **/
            if (($(window).scrollTop() > ($(value).offset().top - 200)
            && ($(window).scrollTop() - $(value).offset().top) < 200)
            || ($(window).scrollTop() > ($(value).offset().top + 200)
            && ($(window).scrollTop() - $(value).offset().top) < 200)) {
              animating = true;
              $('html, body').animate( { scrollTop: $(value).offset().top }, 250);
              setTimeout(function() { animating = false; }, 300);
              return false;
            }
          });
        }, 200));
    }
});
li {
    padding-bottom: 40px;
    font-size: 2.2rem;
    text-align: center;
    justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul>
        <li class="item"><div>Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br /></div></li>
        <li class="item"><div>fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br /></div></li>
  
  <li class="item"><div>Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br /></div></li>
        <li><div>fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br /></div></li>
  
  <li><div>Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br /></div></li>
        <li class="item"><div>fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br /></div></li>
  
  <li class="item"><div>Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br /></div></li>
        <li class="item"><div>fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br /></div></li>
</ul>
</div>

user_110445420

Have you tried using -webkit?

Some -webkit-scroll-snap examples for Safari: https://webkit.org/demos/scroll-snap/index.html

Perhaps:

div {
    max-height: 100vh;
    overflow: scroll;
    -webkit-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
}

li {
    -webkit-scroll-snap-align: start;
    scroll-snap-align: start;
}
user_122594210
Related