Keep It Snappy
As we’ve said before, we’re excited about CSS Snap Points, as it standardizes and simplifies a lot of the common “carousel” behavior that we’d otherwise need to mimic with a bunch of JavaScript. There are a number of great resources that describe how to use CSS Snap Points (e.g. Sarah Drasner’s CSS Tricks article), however, Todd here noticed that many existing examples (including ours) didn’t seem to work in Safari on the current betas of iOS11.
After a bit of inspection, we found that Safari in iOS11 sets the new scroll-snap-align CSS property to a value of none when it is not explicitly defined in a stylesheet, and as far as I can tell that means a snap points carousel will not snap as expected. This is a shame since most CSS snap points implementations we can find on the web were created before that property even existed!
If scroll-snap-align is new to you, don’t feel bad—it was added to the spec just this year. Here’s how the w3c spec describes it:
The
scroll-snap-alignproperty specifies the box’s snap position as an alignment of its snap area (as the alignment subject) within its snap container’s snapport (as the alignment container).
Coincidentally, snapport is also an acceptable reply when someone sneezes… here at Filament at least, as of today.
Anyway. There is a quick fix: add a scroll-snap-align rule to the snappable child items in your scroller (adjusting your selectors accordingly).
#my-scrolling-element > .child {
scroll-snap-align: start;
}We found that start is typically the value we need, but other values like end or center might make sense in some cases.
Based on my observations, it seems that iOS Safari is the first browser to recognize this property. Firefox, another CSS Snap Points supporting browser, does not yet recognize it, for example. However, I’d expect that whenever it does, it too will follow the spec and utilize this default value of none.
Hopefully, the Safari team (or the w3c spec authors?) will decide to change the default of this property to something like start, but just in case, it seems like a good idea to add it explicitly today. And by the way, if you happen to use our Snapper carousel, you’ll find this property is already added to the CSS in version 3.0.0.