Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-scroll-snap-1] Alignment when scrolling to an element with scroll-snap-align #9576

Open
flackr opened this issue Nov 8, 2023 · 1 comment
Labels
css-scroll-snap-1 Current Work

Comments

@flackr
Copy link
Contributor

flackr commented Nov 8, 2023

css-scroll-snap-1 6.2 Choosing Snap Positions says the following:

If a page is navigated to a fragment that defines a target element (e.g. one that would be matched by :target, or the target of scrollIntoView()), and that element defines some snap positions, the user agent must snap to one of that element’s snap positions if its nearest scroll container is a scroll snap container. The user agent may also do this even when the scroll container has scroll-snap-type: none.

While working on this, the question came up of how to respect the alignment if the developer provided one. E.g. if the developer specifies a block alignment:

target.scrollIntoView({block: "end"});

What should we do if the target element has a non-none scroll-snap-align:

Having a CSS value override the JS one, especially when it's optional, seems like it runs counter to developer expectations - e.g. confusion around why the provided alignment wasn't used.

Another concern is that currently scrolling to a fragment also specifically invokes Scroll target into view, with behavior set to "auto", block set to "start", and inline set to "nearest" so it currently has a specified alignment, even though the developer did not provide it.

TLDR; There are a few questions around this space:

  1. If we want to allow the developer to override the alignment, we probably need to have default values of "auto" which can then take the value from the scroll-snap-align value if specified, and otherwise fall back to defaults.
  2. If we do want to allow the developer to override the alignment, then we also should update the scrolling to a fragment algorithm to pass in overridable "auto" values.
  3. Can we make the optional "The user agent may also do this" part mandatory? This optional behavior is currently tested by scroll-target-align-001.html and scroll-target-align-002.html which results in interop 2022 failures as it's not implmented in chrome or safari. We could also relax the tests to allow not doing it, but it seems like it would be better if the behavior was consistent.
@flackr flackr added the css-scroll-snap-1 Current Work label Nov 8, 2023
@skobes-chromium
Copy link

Small correction - the interop 2022 failures are scroll-target-snap-001.html and scroll-target-snap-002.html. These are snap containers (with proximity snapping). Chrome gives precedence to (default) ScrollIntoViewOptions over (explicit) scroll-snap-align. But on this point I observe that the Scroll Snap spec is in contradiction to the CSSOM View spec (re. how to "scroll a target into view"); we can't satisfy them both as written.

The tests scroll-target-align-001.html and scroll-target-align-002.html are also failing in Chrome but not tagged with interop 2022. These are the ones testing what the Scroll Snap spec declares to be optional behavior around honoring scroll-snap-align in NON-snapping containers (scroll-snap-type: none).

chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Nov 13, 2023
Chrome prioritizes ScrollIntoViewOptions over scroll-snap-align, but the
specs need clarification on this point:

w3c/csswg-drafts#9576

In the meantime, have the tests use scroll-snap-align: start instead of
center, so that it matches the default ScrollIntoViewOptions.

Bug: 1325845
Change-Id: Ibd40a187cc86b9286ff9e2c7a67ed59d7233185b
aarongable pushed a commit to chromium/chromium that referenced this issue Nov 13, 2023
Chrome prioritizes ScrollIntoViewOptions over scroll-snap-align, but the
specs need clarification on this point:

w3c/csswg-drafts#9576

In the meantime, have the tests use scroll-snap-align: start instead of
center, so that it matches the default ScrollIntoViewOptions.

Bug: 1325845
Change-Id: Ibd40a187cc86b9286ff9e2c7a67ed59d7233185b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5025233
Reviewed-by: Robert Flack <[email protected]>
Commit-Queue: Steve Kobes <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1223689}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Nov 13, 2023
Chrome prioritizes ScrollIntoViewOptions over scroll-snap-align, but the
specs need clarification on this point:

w3c/csswg-drafts#9576

In the meantime, have the tests use scroll-snap-align: start instead of
center, so that it matches the default ScrollIntoViewOptions.

Bug: 1325845
Change-Id: Ibd40a187cc86b9286ff9e2c7a67ed59d7233185b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5025233
Reviewed-by: Robert Flack <[email protected]>
Commit-Queue: Steve Kobes <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1223689}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Nov 13, 2023
Chrome prioritizes ScrollIntoViewOptions over scroll-snap-align, but the
specs need clarification on this point:

w3c/csswg-drafts#9576

In the meantime, have the tests use scroll-snap-align: start instead of
center, so that it matches the default ScrollIntoViewOptions.

Bug: 1325845
Change-Id: Ibd40a187cc86b9286ff9e2c7a67ed59d7233185b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5025233
Reviewed-by: Robert Flack <[email protected]>
Commit-Queue: Steve Kobes <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1223689}
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Nov 22, 2023
…ap-* tests., a=testonly

Automatic update from web-platform-tests
Avoid spec ambiguity in scroll-target-snap-* tests.

Chrome prioritizes ScrollIntoViewOptions over scroll-snap-align, but the
specs need clarification on this point:

w3c/csswg-drafts#9576

In the meantime, have the tests use scroll-snap-align: start instead of
center, so that it matches the default ScrollIntoViewOptions.

Bug: 1325845
Change-Id: Ibd40a187cc86b9286ff9e2c7a67ed59d7233185b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5025233
Reviewed-by: Robert Flack <[email protected]>
Commit-Queue: Steve Kobes <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1223689}

--

wpt-commits: ff3d3e29464e87581edc6eea7037485e424097d7
wpt-pr: 43117
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Nov 22, 2023
…ap-* tests., a=testonly

Automatic update from web-platform-tests
Avoid spec ambiguity in scroll-target-snap-* tests.

Chrome prioritizes ScrollIntoViewOptions over scroll-snap-align, but the
specs need clarification on this point:

w3c/csswg-drafts#9576

In the meantime, have the tests use scroll-snap-align: start instead of
center, so that it matches the default ScrollIntoViewOptions.

Bug: 1325845
Change-Id: Ibd40a187cc86b9286ff9e2c7a67ed59d7233185b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5025233
Reviewed-by: Robert Flack <[email protected]>
Commit-Queue: Steve Kobes <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1223689}

--

wpt-commits: ff3d3e29464e87581edc6eea7037485e424097d7
wpt-pr: 43117
vinnydiehl pushed a commit to vinnydiehl/mozilla-unified that referenced this issue Nov 24, 2023
…ap-* tests., a=testonly

Automatic update from web-platform-tests
Avoid spec ambiguity in scroll-target-snap-* tests.

Chrome prioritizes ScrollIntoViewOptions over scroll-snap-align, but the
specs need clarification on this point:

w3c/csswg-drafts#9576

In the meantime, have the tests use scroll-snap-align: start instead of
center, so that it matches the default ScrollIntoViewOptions.

Bug: 1325845
Change-Id: Ibd40a187cc86b9286ff9e2c7a67ed59d7233185b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5025233
Reviewed-by: Robert Flack <[email protected]>
Commit-Queue: Steve Kobes <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1223689}

--

wpt-commits: ff3d3e29464e87581edc6eea7037485e424097d7
wpt-pr: 43117
vinnydiehl pushed a commit to vinnydiehl/mozilla-unified that referenced this issue Nov 24, 2023
…ap-* tests., a=testonly

Automatic update from web-platform-tests
Avoid spec ambiguity in scroll-target-snap-* tests.

Chrome prioritizes ScrollIntoViewOptions over scroll-snap-align, but the
specs need clarification on this point:

w3c/csswg-drafts#9576

In the meantime, have the tests use scroll-snap-align: start instead of
center, so that it matches the default ScrollIntoViewOptions.

Bug: 1325845
Change-Id: Ibd40a187cc86b9286ff9e2c7a67ed59d7233185b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5025233
Reviewed-by: Robert Flack <[email protected]>
Commit-Queue: Steve Kobes <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1223689}

--

wpt-commits: ff3d3e29464e87581edc6eea7037485e424097d7
wpt-pr: 43117
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified-and-comments-removed that referenced this issue Nov 30, 2023
…ap-* tests., a=testonly

Automatic update from web-platform-tests
Avoid spec ambiguity in scroll-target-snap-* tests.

Chrome prioritizes ScrollIntoViewOptions over scroll-snap-align, but the
specs need clarification on this point:

w3c/csswg-drafts#9576

In the meantime, have the tests use scroll-snap-align: start instead of
center, so that it matches the default ScrollIntoViewOptions.

Bug: 1325845
Change-Id: Ibd40a187cc86b9286ff9e2c7a67ed59d7233185b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5025233
Reviewed-by: Robert Flack <flackrchromium.org>
Commit-Queue: Steve Kobes <skobeschromium.org>
Cr-Commit-Position: refs/heads/main{#1223689}

--

wpt-commits: ff3d3e29464e87581edc6eea7037485e424097d7
wpt-pr: 43117

UltraBlame original commit: e0272cfd4f73823e45cff178a76e6e89e379c848
gecko-dev-updater pushed a commit to marco-c/gecko-dev-comments-removed that referenced this issue Nov 30, 2023
…ap-* tests., a=testonly

Automatic update from web-platform-tests
Avoid spec ambiguity in scroll-target-snap-* tests.

Chrome prioritizes ScrollIntoViewOptions over scroll-snap-align, but the
specs need clarification on this point:

w3c/csswg-drafts#9576

In the meantime, have the tests use scroll-snap-align: start instead of
center, so that it matches the default ScrollIntoViewOptions.

Bug: 1325845
Change-Id: Ibd40a187cc86b9286ff9e2c7a67ed59d7233185b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5025233
Reviewed-by: Robert Flack <flackrchromium.org>
Commit-Queue: Steve Kobes <skobeschromium.org>
Cr-Commit-Position: refs/heads/main{#1223689}

--

wpt-commits: ff3d3e29464e87581edc6eea7037485e424097d7
wpt-pr: 43117

UltraBlame original commit: e0272cfd4f73823e45cff178a76e6e89e379c848
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified that referenced this issue Nov 30, 2023
…ap-* tests., a=testonly

Automatic update from web-platform-tests
Avoid spec ambiguity in scroll-target-snap-* tests.

Chrome prioritizes ScrollIntoViewOptions over scroll-snap-align, but the
specs need clarification on this point:

w3c/csswg-drafts#9576

In the meantime, have the tests use scroll-snap-align: start instead of
center, so that it matches the default ScrollIntoViewOptions.

Bug: 1325845
Change-Id: Ibd40a187cc86b9286ff9e2c7a67ed59d7233185b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5025233
Reviewed-by: Robert Flack <flackrchromium.org>
Commit-Queue: Steve Kobes <skobeschromium.org>
Cr-Commit-Position: refs/heads/main{#1223689}

--

wpt-commits: ff3d3e29464e87581edc6eea7037485e424097d7
wpt-pr: 43117

UltraBlame original commit: e0272cfd4f73823e45cff178a76e6e89e379c848
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-scroll-snap-1 Current Work
Projects
None yet
Development

No branches or pull requests

2 participants