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 ?

score 13 · Accepted Answer · answered Nov 20 '15 at 01:03

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.

score 3 · Answer 2 · answered Nov 20 '15 at 14:15

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>

score 3 · Answer 3 · answered Sep 05 '19 at 21:39

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.

answered Sep 05 '19 at 21:39

Moonjsit

630
3
11

Kyle Wagner · Answer 4 · 2020-04-25T15:14:49.027

3

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.

edited Apr 25 '20 at 15:14

answered Apr 25 '20 at 12:34

Kyle Wagner

31
2

score 2 · Answer 5 · answered Nov 18 '15 at 15:35

2

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

answered Nov 18 '15 at 15:35

Sidius

416
1
5
24

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. – Jeanluca Scaljeri Nov 19 '15 at 20:58
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. – irnmn Nov 20 '15 at 00:55
Hmmm... Which version of jquery are you guys using? I am using the one provided by google (v 1.8.2) – Sidius Nov 20 '15 at 11:57

CSS Scroll snap point not working in iOS 9.1 safari

5 Answers5