Enable CSS Scroll Snapping by Default on Desktop

RESOLVED FIXED in Firefox 39

Status

()

defect
RESOLVED FIXED
4 years ago
2 years ago

People

(Reporter: kip, Assigned: kip)

Tracking

({dev-doc-complete})

unspecified
mozilla39
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox39 fixed, relnote-firefox 39+)

Details

()

Attachments

(1 attachment)

Assignee

Description

4 years ago
This bug enables CSS Scroll Snapping by default on all desktop platforms.

CSS Scroll Snapping will land first on Firefox OS with Bug 1138651.

Before it can be enabled by default on Desktop platforms, Bug 959250 will need to be landed to integrate CSS Scroll Snapping with scrollbar support.
Assignee

Updated

4 years ago
Depends on: 1140623
Release Note Request (optional, but appreciated)
[Why is this notable]: New CSS feature
[Suggested wording]: Added support for CSS Scroll Snapping
[Links (documentation, blog post, etc)]:
https://wiki.mozilla.org/Gecko:CSSScrollSnapping
http://dev.w3.org/csswg/css-snappoints/
relnote-firefox: --- → ?
Assignee

Comment 2

4 years ago
(In reply to Lawrence Mandel [:lmandel] (use needinfo) from comment #1)
> Release Note Request (optional, but appreciated)
> [Why is this notable]: New CSS feature
> [Suggested wording]: Added support for CSS Scroll Snapping
> [Links (documentation, blog post, etc)]:
> https://wiki.mozilla.org/Gecko:CSSScrollSnapping
> http://dev.w3.org/csswg/css-snappoints/
Please note that the specification (and this implementation) has changed significantly since the page on wiki.mozilla.org was created.

The http://dev.w3.org/csswg/css-snappoints/ link matches the implementation that is landing.
Assignee

Comment 3

4 years ago
The test in Bug 969250 has been updated to work properly on OSX 10.6, and has been set to checkin-needed.  Please check in Bug 969250 before this one.
Keywords: checkin-needed
Target Milestone: --- → mozilla40
Is there supposed to be a patch in this bug for checkin?
Flags: needinfo?(kgilbert)
Keywords: checkin-needed
Assignee

Comment 5

4 years ago
- The layout.css.scroll-snap.enabled preference is now enabled on all
  platforms, except for Android.
Flags: needinfo?(kgilbert)
Attachment #8583325 - Flags: review?(roc)
Assignee

Comment 6

4 years ago
(In reply to Wes Kocher (:KWierso) from comment #4)
> Is there supposed to be a patch in this bug for checkin?
Sorry, I had missed this patch.  It has been attached now, and can be checked in once I get an r+
Assignee

Updated

4 years ago
Keywords: checkin-needed
Target Milestone: mozilla40 → mozilla39
Assignee

Comment 8

4 years ago
(In reply to Lawrence Mandel [:lmandel] (use needinfo) from comment #1)

Here is a more detailed description for the release notes, if that would be useful.

Release Note Request (optional, but appreciated)
[Why is this notable]: New CSS feature
[Suggested wording]:

Added support for CSS Scroll Snap Points

CSS scroll snapping is easy to use.  With only a couple CSS tags, you can define snapping points at intervals or on specific points of elements in the scrolling frame.

Scroll snapping feels native on both desktop and mobile devices.  When releasing a drag or fling gesture on a multi-touch trackpad or mobile touch screen, a physically modeled animation naturally lands the fling in a snapping position.  The browser remains responsive during this animation, so Javascript can perform other tasks simultaneously without risk of janky scrolling.

The user is always in control and can interrupt the scroll snap animation at any time.  When the user releases their scroll-bar, track pad finger, or touch screen, scroll snapping resumes.

[Links (documentation, blog post, etc)]:
http://dev.w3.org/csswg/css-snappoints/
https://hg.mozilla.org/mozilla-central/rev/90cef983391a
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
kip:  I had another release note marked for bug 945584 already, but this looks like a better bug to link to.  

The release notes are usually pretty short. Your description in comment 8 would be really good on a wiki page or MDN. Or maybe as a blog post. If you post it, can you let me know so I can change the link in the note? Thanks!
How come the examples from the spec don't seem to work? Tried on Firefox for Android (nightly).

http://jsbin.com/zomoladona/1/
http://jsbin.com/zomoladona/2/

Maybe did something wrong?
I was trying this with Marcos on my Nexus 5 running Fennec nightly (today's build, I think) and the examples at [1] (specifically [2]) didn't work for me, either.

[1]
http://generatedcontent.org/post/66817675443/setting-native-like-scrolling-offsets-in-css-with

[2]
https://dl.dropboxusercontent.com/u/444684/OpenWebDemos/snapPoints/simple.html
Assignee

Comment 13

4 years ago
(In reply to Marcos Caceres [:marcosc] from comment #11)
> How come the examples from the spec don't seem to work? Tried on Firefox for
> Android (nightly).
> 
> http://jsbin.com/zomoladona/1/
> http://jsbin.com/zomoladona/2/
> 
> Maybe did something wrong?

CSS Scroll snapping is not enabled yet for Android.  This will be enabled with Bug 1138668.

On the desktop Nightly browser, the first example is working :-)
The second example needs a height attribute added to .docScroller, as that frame is just growing to fit the contents and not actually scrolling.
(In reply to :kip (Kearwood Gilbert) from comment #13)
> (In reply to Marcos Caceres [:marcosc] from comment #11)
> > How come the examples from the spec don't seem to work? Tried on Firefox for
> > Android (nightly).
> > 
> > http://jsbin.com/zomoladona/1/
> > http://jsbin.com/zomoladona/2/
> > 
> > Maybe did something wrong?
> 
> CSS Scroll snapping is not enabled yet for Android.  This will be enabled
> with Bug 1138668.
> 
> On the desktop Nightly browser, the first example is working :-)
> The second example needs a height attribute added to .docScroller, as that
> frame is just growing to fit the contents and not actually scrolling.

Got it! That soooo badass! The web just got so much more awesome. 
http://jsbin.com/pibodoceyo/7
Thanks teoli! Does this page https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-points-y still need to say "experimental"?
Flags: needinfo?(jypenator)
Yes, it is not yet a standard, only a FPWD, so the syntax can change.
Flags: needinfo?(jypenator)
You need to log in before you can comment on or make changes to this bug.