Intent to Implement: css-scroll-anchoring

Ryan Hunt

unread,

Nov 14, 2018, 4:05:18 PM11/14/18

to dev-pl...@lists.mozilla.org

Summary:

Scroll anchoring aims to prevent user experience disruptions from content
loading outside the viewport and causing the page to jump around.

Bug: Bug 1305957

Link to standard:

https://drafts.csswg.org/css-scroll-anchoring/

Platform coverage: All platforms

Estimated or target release: 56

Preference behind which this will be implemented: layout.scroll-anchoring.enabled

Is this feature enabled by default in sandboxed iframes? Yes

DevTools bug: No bug

Do other browser engines implement this?

Chrome shipped this in M56.

web-platform-tests:

https://github.com/web-platform-tests/wpt/tree/master/css/css-scroll-anchoring

Is this feature restricted to secure contexts?

No. Scrolling behavior changes aren't restricted to secure contexts.

Thanks,
Ryan

Ryan Hunt

unread,

Nov 14, 2018, 4:09:40 PM11/14/18

to dev-pl...@lists.mozilla.org

Apologies. The target release is 66, while Chrome released this feature in M56.

‐‐‐‐‐‐‐ Original Message ‐‐‐‐‐‐‐

Chris Peterson

unread,

Nov 14, 2018, 4:44:35 PM11/14/18

to

This is great news! In a recent study of Fennec's perceived performance,
users ranked 16 criteria for evaluating mobile browser responsiveness.
#1 was "Not having the page jump around when scrolling". For a point of
reference for just how important that is, "Loading a website" was only
#3. :)

Will scroll anchoring benefit both desktop and mobile content? What is a
good example website to see the effect of scroll anchoring?

Ryan Hunt

unread,

Nov 14, 2018, 5:28:24 PM11/14/18

to Chris Peterson, dev-pl...@lists.mozilla.org

Scroll anchoring should benefit both desktop and mobile content.

I have a feeling the biggest impact will be on mobile though. Scroll anchoring
should help there when the viewport resizes from a rotation, not just as content
loads.

There's a good video in the Chrome announcement here [1].

I've also written two sample pages that you can compare between Blink and
Gecko [2] [3]. Scroll down and interact with the button/slider.

Thanks,
Ryan

[1] https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html
[2] https://eqrion.github.io/web-tests/scrolling/scroll-anchor-test-1.html
[3] https://eqrion.github.io/web-tests/scrolling/scroll-anchor-test-2.html

‐‐‐‐‐‐‐ Original Message ‐‐‐‐‐‐‐

> dev-platform mailing list
> dev-pl...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-platform

fri...@jeka.info

unread,

Nov 16, 2018, 3:54:23 PM11/16/18

to

Am Mittwoch, 14. November 2018 22:05:18 UTC+1 schrieb Ryan Hunt:
> Summary:
>
> Scroll anchoring aims to prevent user experience disruptions from content
> loading outside the viewport and causing the page to jump around.

So this will fix stone-old bugs like
https://bugzilla.mozilla.org/show_bug.cgi?id=60307
and friends (103279, 1476049, etc.)?

Ryan Hunt

unread,

Nov 17, 2018, 1:56:41 PM11/17/18

to fri...@jeka.info, dev-pl...@lists.mozilla.org

>From a glance, it looks scroll anchoring would fix bug 60307.

I can't guarantee it'll fix the rest of the issues, but it should get us
closer to fixing them.

Thanks,
Ryan

‐‐‐‐‐‐‐ Original Message ‐‐‐‐‐‐‐