csssafaribrowser-supportscroll-snap-points

CSS Scroll snap point not working in iOS 9.1 safari

I just updated my ipad mini to iOS 9.1 and according to Can I use I should be able to use css snappoints on my device in safari. There are snap-point demo's on the web, but I've written one of my own (why not :) DEMO. In that demo you can scroll horizontally.

HTML:

<ol>
        <li class="a"></il>
        <li class="b"></il>
        ...
</ol>

Styles:

ol {
    list-style-type: none;

    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    scroll-snap-type: mandatory;
    scroll-snap-points-x: repeat(100%);
    scroll-behavior: smooth;
}

Anyway, my demo works in FF and Safari on my laptop, but on my iPad it doesn't. So the questions is, is Can I Use wrong or am I doing something wrong ?

Solution

  • I was able to make it work by adding in a -webkit-overflow-scrolling: touch; see this updated fiddle http://jsfiddle.net/hpjtqewn/2/

    The button doesn't work, but when I use my finger and scroll, it snaps to the correct snap points, same in my safari on my desktop, which works when I use my touchpad to scroll. Regular mouse doesn't work, and clicking the button doesn't work, but that is probably related to how you are using the .scrollTo through jquery.