Page scroll position is not consistent while content is loading (implement "scroll anchoring")
Categories
(Core :: Layout, defect, P3)
Tracking
()
People
(Reporter: bugzilla, Assigned: rhunt)
References
(Depends on 1 open bug, Blocks 4 open bugs, Regressed 1 open bug, )
Details
(Keywords: dev-doc-complete, feature, Whiteboard: [geckoview:p2][wptsync upstream])
Attachments
(16 files, 1 obsolete file)
7.33 KB,
text/html
|
Details | |
19.27 KB,
patch
|
Details | Diff | Splinter Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review |
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:50.0) Gecko/20100101 Firefox/50.0 Build ID: 20160926162149 Steps to reproduce: 1. Open any page with several large images (or other dynamically loaded content with significant height) 2. With no waiting for images, scroll down for some point. 3. When images are loaded one by one, the browser does not keep you on selected point, rather loaded images are "pushed" all content below and you need to scroll again to find the point. Actual results: 3. When images are loaded one by one, the browser does not keep you on selected point, rather loaded images are "pushed" all content below and you need to scroll again to find the point. Very annoying. It's happening even when anchor exists (open the example page with, say, #anchor3) Expected results: Browser should remember somehow the selected point and keep scroll there while content is loading
Comment 1•7 years ago
|
||
So this is basically asking for something like Chrome's experimental "Scroll Anchoring", https://developers.google.com/web/updates/2016/04/scroll-anchoring?hl=en . I thought we had an existing bug about it, but I can't find it.
(In reply to Markus Stange [:mstange] from comment #1) > something like Chrome's experimental "Scroll Anchoring", Exactly! (Didn't knew Chrome has this feature)
Comment 3•7 years ago
|
||
I don't think we have any existing bug on this, it just came up in email or IRC discussion somewhere. This can be the bug :)
Updated•7 years ago
|
Comment 4•7 years ago
|
||
Chrome Canary has now enabled this feature by default, and it is expected to ship in Chrome 56: https://www.chromestatus.com/feature/5700102471548928. I have tweeted about this some hours ago (https://twitter.com/simevidas/status/799510987460214785), and have since then been showered with positive responses (most of them in “quote tweets”). I think, it would be a good idea to put a priority on this bug. Could someone notify D. Baron?
Comment 6•7 years ago
|
||
FWIW, the existing bug on this was bug 43114. I think this is worth doing, but I've never quite managed to get it to the top of my own priority list. (I did briefly once, and then I was dragged away for the original crashkill effort.) It seems like the Chrome team has done a bunch of good research as to what aspects of this are Web-compatible. I had somewhat-different ideas as to how to do the anchoring (e.g., bug 43114 comment 10, and using named anchors as the anchor when available) and a little bit more in a local patch that I started. Those could probably be added later if desirable.
Comment 7•7 years ago
|
||
This has been featured extensively in https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html According to the Chrome team, "scroll anchoring is preventing about three page jumps per page-view." David, Jet, we should probably look into prioritizing this.
Comment 8•6 years ago
|
||
It looks like this is now a draft CSSWG spec. See also this explainer document: https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md
Comment 9•6 years ago
|
||
We should implement relative scroll offset updates for APZ (bug 1453425) before enabling this; otherwise, this will just be another source of main-thread driven scroll offset updates that can interfere with async scrolling. (There's no need for _implementation_ work on this to be blocked on bug 1453425, just the eventual enablement.)
Updated•6 years ago
|
Updated•6 years ago
|
Assignee | ||
Comment 12•5 years ago
|
||
After I finish bug 1453425 I'd like to take this. I experimented and wrote this prototype patch that implements the scroll anchoring spec without adjustment suppression or the opt-out CSS property. The test case I was focusing on getting working is here [1]. Scroll down to the button that says 'Add element to top' and click it. With scroll anchoring you should not have content slide down after you click. I can confirm with Chrome and Firefox + this patch, that's the observed behavior. I also added code to highlight the current scroll anchor as it changes for debugging. Here's the test case I wrote for seeing the interaction with different `display, position, float` options [2]. [1] https://eqrion.github.io/web-tests/scrolling/scroll-anchor-test-1.html [2] https://eqrion.github.io/web-tests/scrolling/scroll-anchor-selection.html
Comment 13•5 years ago
|
||
@Ryan Hunt Thanks for taking this bug. I think this is a primary issue that afflicts user experience with Firefox in a very noticeable way. I just want to add an example, hoping it could help to cover all the cases scenarios related to this bug. In my experience, the problem don't happen only when a page is loading, but when I scroll a page that loads dynamically. In these cases wait for the page finishes loading is not a solution, and that's why it is very annoying. The problems happens, for example, when I scroll a wanted list on Amazon. The page loads the elements in the list (and other elements in the page such as suggested products on the bottom) while you scroll it, so simply check the list become a pain. I hope Firefox could have its "scroll anchoring" soon.
Updated•5 years ago
|
Updated•5 years ago
|
Assignee | ||
Comment 14•5 years ago
|
||
Okay I think the patches are ready for review now. Here's my last try run [1]. It's green minus some WPT failures in the scroll-anchoring tests where I was trying to get the latest passes and failures. [1] https://treeherder.mozilla.org/#/jobs?repo=try&revision=0851d651e35cfec44995e72088c855483a154b11
Assignee | ||
Comment 15•5 years ago
|
||
Assignee | ||
Comment 16•5 years ago
|
||
https://drafts.csswg.org/css-scroll-anchoring/#exclusion-api Depends on D13263
Assignee | ||
Comment 17•5 years ago
|
||
This commit is used in a later commit to exclude frames that are sticky positioned from being scroll anchors. Depends on D13265
Assignee | ||
Comment 18•5 years ago
|
||
This commit adds a barebones class called 'ScrollAnchorContainer' that will contain most of the logic for scroll anchoring. It is owned as a member of ScrollFrameHelper, and has the same lifetime. Depends on D13266
Assignee | ||
Comment 19•5 years ago
|
||
This commit implements candidate selection for a scroll frame using a frame tree traversal. It roughly tries to follow the algorithm given in the scroll anchoring draft specification, adapted to operate on the frame tree [1]. Some details, such as not selecting an anchor if the user hasn't scrolled are not currently in the specification but will be to match Blink's implementation. Once a scroll anchor has been selected, we maintain a bit on it and its ancestor frame's states. This is used in a later commit to detect changes to position during a reflow so the scroll frame can perform an adjustment. A scroll anchor will be invalidated when the user scrolls the frame or the scroll anchor is destroyed. Later commits will add logic to drive selection and invalidation appropriately. [1] https://drafts.csswg.org/css-scroll-anchoring/#anchor-node-selection Depends on D13267
Assignee | ||
Comment 20•5 years ago
|
||
This commit adds a mechanism for scroll anchor containers to request an anchor node selection at a future time. Currently this is before styling so that anchor adjustment suppression will have current anchor nodes. Depends on D13268
Assignee | ||
Comment 21•5 years ago
|
||
This commit implements anchor offset adjustment. When the position of a frame that is an anchor is changed during reflow, we notify the anchor container. The anchor container will then post a reflow callback. Then when reflow is completed, the anchor container will perform a scroll to keep the anchor node in the same relative position. Depends on D13269
Assignee | ||
Comment 22•5 years ago
|
||
This commit implements the first half of the heuristics to detect style changes that could lead to feedback loops with scroll anchoring. [1] When these style changes are made, a suppression flag is added to the anchor container to ignore any adjustments that would be made at the next layout flush and to invalidate the anchor at that time. [1] https://drafts.csswg.org/css-scroll-anchoring/#suppression-triggers Depends on D13270
Assignee | ||
Comment 23•5 years ago
|
||
This will be needed to add a new change hint to detect changes to the position property, in the next commit. Depends on D13271
Assignee | ||
Comment 24•5 years ago
|
||
This commit implements the second half of the heuristics to detect style changes that could lead to feedback loops with scroll anchoring. [1] A new change hint is added for when a style is changed from positioned to not positioned. When this hint is applied, scroll anchor suppression is triggered in the scroll anchor container where the frame used to be, and the new scroll anchor container where the frame is added after reconstruction. [1] https://drafts.csswg.org/css-scroll-anchoring/#suppression-triggers Depends on D13272
Assignee | ||
Comment 25•5 years ago
|
||
Some of these tests were failing on try but passing locally because of viewport size differences. This commit expands some spacing to ensure the tests are fully scrollable on most screen sizes. Depends on D13273
Assignee | ||
Comment 26•5 years ago
|
||
Not all tests are passing with the initial implementation. Most are due to differences between Gecko and Blink with regards to ScrollTop, ScrollLeft in documents with writing-mode: vertical-rl. Some are due to issues in our anchor node selection algorithm remaining. Depends on D13274
Assignee | ||
Comment 27•5 years ago
|
||
This commit adds a debug pref that will highlight the frames that are marked as anchor nodes. This is helpful to debug anchor selection. Depends on D13275
Assignee | ||
Comment 28•5 years ago
|
||
I tried to pick appropriate reviewers for all the patches, but please feel free to review whichever patches you think necessary and bring in anyone who should be included.
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Assignee | ||
Updated•5 years ago
|
Updated•5 years ago
|
Assignee | ||
Comment 29•5 years ago
|
||
I've filed some bugs for follow-up work.
I have patches for most of them, but don't want to delay landing the initial implementation in nightly for them to be reviewed.
Assignee | ||
Comment 30•5 years ago
|
||
Depends on D13273
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Assignee | ||
Comment 31•5 years ago
|
||
Depends on D13276
Assignee | ||
Comment 32•5 years ago
|
||
Try run looks good [1]. There's just one last issue I found in a devtools test. Once the commit to fix that is reviewed, we should be good to go.
[1] https://treeherder.mozilla.org/#/jobs?repo=try&revision=53b6c49a9f82bf7427683ba10b78460fa87fc786
Comment 33•5 years ago
|
||
Pushed by rhunt@eqrion.net: https://hg.mozilla.org/integration/mozilla-inbound/rev/6bd0bdab93cb part 1 - Add 'layout.scroll-anchoring.enabled' preference behind nightly flag. r=hiro https://hg.mozilla.org/integration/mozilla-inbound/rev/c66c00f73296 part 2 - Add 'overflow-anchor' CSS property. r=emilio https://hg.mozilla.org/integration/mozilla-inbound/rev/6b96050386f6 part 3 - Add IsStickyPositioned() method to nsStyleDisplay. r=emilio https://hg.mozilla.org/integration/mozilla-inbound/rev/3033401ef320 part 4 - Add basic ScrollAnchorContainer implementation. r=hiro https://hg.mozilla.org/integration/mozilla-inbound/rev/bdb766faa867 part 5 - Add implementation of scroll anchor selection and invalidation. r=hiro,dbaron,dholbert https://hg.mozilla.org/integration/mozilla-inbound/rev/e7124fecb721 part 6 - Select scroll anchors when flushing notifications in PresShell. r=hiro https://hg.mozilla.org/integration/mozilla-inbound/rev/d9052f7b34d9 part 7 - Adjust scroll offset to match change in relative position of scroll anchor after reflow. r=hiro,dbaron https://hg.mozilla.org/integration/mozilla-inbound/rev/d9445a5f3458 part 8 - Suppress scroll offset adjustment when some layout affecting properties are changed on scroll anchor or its ancestors. r=hiro https://hg.mozilla.org/integration/mozilla-inbound/rev/e76b842c7b7f part 9 - Suppress scroll offset adjustment when node moves into flow or out of flow inside of a scrollable frame. r=emilio https://hg.mozilla.org/integration/mozilla-inbound/rev/bfca5019a9cc part 10 - Add block box inside of inline-box so it can be an anchor for 'start-edge-in-block' scroll-anchoring test. r=dholbert https://hg.mozilla.org/integration/mozilla-inbound/rev/b4cb2cbebdb6 part 11 - Make sure scroll anchoring web-platform-tests are fully scrollable on larger window sizes. r=hiro https://hg.mozilla.org/integration/mozilla-inbound/rev/950bf6ad1ef2 part 12 - Update web-platform-test expectations for scroll anchoring. r=hiro https://hg.mozilla.org/integration/mozilla-inbound/rev/d8eef8f3e396 part 13 - Highlight scroll anchor when 'layout.scroll-anchoring.highlight' is enabled. r=mattwoodrow https://hg.mozilla.org/integration/mozilla-inbound/rev/51c86d025ecb part 14 - Disable scroll-anchoring in webconsole-output. r=nchevobbe
Comment 34•5 years ago
|
||
Pushed by rhunt@eqrion.net: https://hg.mozilla.org/integration/mozilla-inbound/rev/4d5eb85d3155 Regenerate the devtools css properties-db.js. r=me
Comment 35•5 years ago
|
||
Backed out 15 changesets (Bug 1305957) for ASAN failures.
Push with failures: https://treeherder.mozilla.org/#/jobs?repo=mozilla-inbound&revision=51c86d025ecb710b8d37d3454a1d0adcfff8f89d&selectedJob=221114559
Backout link: https://hg.mozilla.org/integration/mozilla-inbound/rev/842b7a62d9cefd5030c5561d536af8414899af7a
Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=221114559&repo=mozilla-inbound&lineNumber=1905
Comment 36•5 years ago
|
||
The following first appeared on the initial 14 changesets push:
Assignee | ||
Comment 37•5 years ago
|
||
The issue was an invalid lifetime assumption in RestyleManager. Here's an ASAN run with the fix applied [1]
[1] https://treeherder.mozilla.org/#/jobs?repo=try&revision=1770f59bdc9ce00399f699b3477ea0dca57a94d8
Comment 38•5 years ago
|
||
Pushed by rhunt@eqrion.net: https://hg.mozilla.org/integration/mozilla-inbound/rev/4e60d1fb951f part 1 - Add 'layout.scroll-anchoring.enabled' preference behind nightly flag. r=hiro https://hg.mozilla.org/integration/mozilla-inbound/rev/8c9be913b3e6 part 2 - Add 'overflow-anchor' CSS property. r=emilio https://hg.mozilla.org/integration/mozilla-inbound/rev/399c5fe7c934 part 3 - Add IsStickyPositioned() method to nsStyleDisplay. r=emilio https://hg.mozilla.org/integration/mozilla-inbound/rev/52a6a35a238d part 4 - Add basic ScrollAnchorContainer implementation. r=hiro https://hg.mozilla.org/integration/mozilla-inbound/rev/b6c42df7ce09 part 5 - Add implementation of scroll anchor selection and invalidation. r=hiro,dbaron,dholbert https://hg.mozilla.org/integration/mozilla-inbound/rev/462f25bfdc65 part 6 - Select scroll anchors when flushing notifications in PresShell. r=hiro https://hg.mozilla.org/integration/mozilla-inbound/rev/a4257d0470d7 part 7 - Adjust scroll offset to match change in relative position of scroll anchor after reflow. r=hiro,dbaron https://hg.mozilla.org/integration/mozilla-inbound/rev/eef9ed24a061 part 8 - Suppress scroll offset adjustment when some layout affecting properties are changed on scroll anchor or its ancestors. r=hiro https://hg.mozilla.org/integration/mozilla-inbound/rev/3f00aed52fb3 part 9 - Suppress scroll offset adjustment when node moves into flow or out of flow inside of a scrollable frame. r=emilio https://hg.mozilla.org/integration/mozilla-inbound/rev/4b492273f763 part 10 - Add block box inside of inline-box so it can be an anchor for 'start-edge-in-block' scroll-anchoring test. r=dholbert https://hg.mozilla.org/integration/mozilla-inbound/rev/da81605d3695 part 11 - Make sure scroll anchoring web-platform-tests are fully scrollable on larger window sizes. r=hiro https://hg.mozilla.org/integration/mozilla-inbound/rev/f2ff150468c2 part 12 - Update web-platform-test expectations for scroll anchoring. r=hiro https://hg.mozilla.org/integration/mozilla-inbound/rev/a245309e92fd part 13 - Highlight scroll anchor when 'layout.scroll-anchoring.highlight' is enabled. r=mattwoodrow https://hg.mozilla.org/integration/mozilla-inbound/rev/e31c9494b9a6 part 14 - Disable scroll-anchoring in webconsole-output. r=nchevobbe
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/14812 for changes under testing/web-platform/tests
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/14816 for changes under testing/web-platform/tests
Comment 41•5 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/4e60d1fb951f
https://hg.mozilla.org/mozilla-central/rev/8c9be913b3e6
https://hg.mozilla.org/mozilla-central/rev/399c5fe7c934
https://hg.mozilla.org/mozilla-central/rev/52a6a35a238d
https://hg.mozilla.org/mozilla-central/rev/b6c42df7ce09
https://hg.mozilla.org/mozilla-central/rev/462f25bfdc65
https://hg.mozilla.org/mozilla-central/rev/a4257d0470d7
https://hg.mozilla.org/mozilla-central/rev/eef9ed24a061
https://hg.mozilla.org/mozilla-central/rev/3f00aed52fb3
https://hg.mozilla.org/mozilla-central/rev/4b492273f763
https://hg.mozilla.org/mozilla-central/rev/da81605d3695
https://hg.mozilla.org/mozilla-central/rev/f2ff150468c2
https://hg.mozilla.org/mozilla-central/rev/a245309e92fd
https://hg.mozilla.org/mozilla-central/rev/e31c9494b9a6
Assignee | ||
Updated•5 years ago
|
Assignee | ||
Comment 42•5 years ago
|
||
I've filed bug 1519644 to be the general meta-bug for all scroll anchoring issues, whether they block the initial release or are future improvements that would be good to do (I expect more of these over time).
Bug 1515946 will still be just for issues blocking the initial release.
Assignee | ||
Updated•5 years ago
|
Ryan, can you suggest a release note? Thanks!
Assignee | ||
Comment 44•5 years ago
|
||
I'll do my best, please edit as necessary.
"Improved scrolling behavior: Firefox will now attempt to keep content from jumping around while a page is loading by supporting scroll anchoring."
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/15057 for changes under testing/web-platform/tests
Upstream PR was closed without merging
Comment 47•5 years ago
|
||
Pushed by james@hoppipolla.co.uk: https://hg.mozilla.org/integration/mozilla-inbound/rev/b1ccec0b7afa [wpt PR 14816] - [Gecko Bug 1305957] Backed out 15 changesets (bug 1305957) for ASAN failures CLOSED TREE, a=testonly
Comment 48•5 years ago
|
||
Hello, I installed Firefox 66 beta but I don't find this feature as reliable as it is on Google Chrome. Here is an example link where scroll anchoring doesn't appear to work at all, unless I'm missing something:
https://discuss.flarum.org/d/5293-rainbow-comic-sans/22
The /22 at the end of the URL makes the page scroll to a specific post in the page (the one with ID 22).
When I load the URL with Chrome, the scrolling correctly "points" to the text message by "Ralkage", with ID 22 (you can check that by clicking on the date near the author of the message).
When I load the URL with Firefox, a different message is shown at the top of the page. Specifically, the image contained in the post with ID 21 (by "0E800") is shown, because it is loaded after the page was scrolled down, causing a content jump.
I've done the tests using incognito mode in order to avoid image caching.
Is this a scenario that is not covered by scroll anchoring?
Thanks.
Comment 49•5 years ago
|
||
(In reply to matteo from comment #48)
FWIW, it's easy to miss stuff in closed bugs, it's better if you file a new one blocking this one.
Hello, I installed Firefox 66 beta but I don't find this feature as reliable as it is on Google Chrome. Here is an example link where scroll anchoring doesn't appear to work at all, unless I'm missing something:
https://discuss.flarum.org/d/5293-rainbow-comic-sans/22
The /22 at the end of the URL makes the page scroll to a specific post in the page (the one with ID 22).
When I load the URL with Chrome, the scrolling correctly "points" to the text message by "Ralkage", with ID 22 (you can check that by clicking on the date near the author of the message).
When I load the URL with Firefox, a different message is shown at the top of the page. Specifically, the image contained in the post with ID 21 (by "0E800") is shown, because it is loaded after the page was scrolled down, causing a content jump.
This looks like a fairly complex test-case, where there's not only scroll anchoring at play, there needs to be other stuff going on as well (they need to manually call scrollIntoView(), I'd guess). So it's not clear to me if scroll anchoring is at play at all here, or it's just the page making bad assumptions, or is other kind of Firefox bug.
In any case, please do file a bug for this. Feel free to CC me and Ryan (:rhunt), and we can try to take a look... A sort of reduced test-case would be immensely helpful to diagnose this though, do you know if Disqus' code is open source somewhere? Otherwise it's much harder to debug.
Comment 50•5 years ago
|
||
Pushed by james@hoppipolla.co.uk: https://hg.mozilla.org/integration/mozilla-inbound/rev/9eb38c69446b [wpt PR 14816] - [Gecko Bug 1305957] Backed out 15 changesets (bug 1305957) for ASAN failures CLOSED TREE, a=testonly
Comment 51•5 years ago
|
||
bugherder |
Comment 52•5 years ago
|
||
Note to MDN writers — I've added a note to the Fx66 rel notes to cover this: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/66#CSS
I think the docs probably need a page for overflow-anchor, and a page to expain what this feature is and show some kind of demo.
Comment 53•5 years ago
|
||
Docs complete; Rachel Andrew wrote a ref page for overflow-anchor, and a brief explainer
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
Comment hidden (spam) |
Comment hidden (spam) |
Comment hidden (spam) |
Comment hidden (spam) |
Comment hidden (spam) |
Comment hidden (spam) |
Comment hidden (spam) |
Comment hidden (spam) |
Description
•