CSS Scroll snap point not working in iOS 9.1 safari

Question

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 ?

Answer 1

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.

Answer 2

You can add a parent div for your ol and use -webkit-overflow-scrolling:touch. It is a fixes for scroll problems on iOS.

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
    <ol>
      <li class="a"></il>
      <li class="b"></il>
      ...
    </ol>
</div>

Answer 3

I've found irnmn answer helpful, but further into the project it stopped working again. After few hours of investigation I found out that adding

overflow: hidden;

to child elements kills snap scrolling on safari, both desktop and mobile.

Answer 4

As of writing, for a full-screen scroll-snapping to happen in Safari requires the scroll-snap-type be with the body tag:

body { 
  scroll-snap-type: y mandatory;
}

Whereas Chrome and Firefox require it to be with the html tag:

html {
  scroll-snap-type: y mandatory;
}

It's a little messy but I had to put them both in my css file for cross-platform compatability.