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 ?

Petry

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.

Montelongo

Answer 2

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.

Cress

Answer 3

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>

Mohammedanism

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.

Flavory

Answer 5

I had the same problem with a project that wouldn't do what you suggest on iPad as well. However, because of a deadline I ended up using this super light little jquery plugin,called:

Snap-point

Try the demo here: http://robspangler.com/git/jquery-snappoint/demo/demo.html

Zaslow

I've tried the demo on desktop and iPad, but there is not much snapping going on if I scroll. If I scroll, I simply experience normal scrolling behaviour. – Petry

I tried it out on my ipad, and if I scrolled to the area where it says to scroll to, it does suck me down to the breakpoint at the top of the box. – Montelongo

Hmmm... Which version of jquery are you guys using? I am using the one provided by google (v 1.8.2) – Zaslow