CSS Scroll snap point not working in iOS 9.1 safari

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.

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>

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.

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.