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

Issue with "ScrollToOptions.behavior": Description of auto value is wrong, lacking historical instant value #2719

Closed
n0099 opened this issue Feb 26, 2021 · 5 comments · Fixed by #23103
Labels
Content:WebAPI Web API docs effort: small This task is a small effort. good first issue A good issue for newcomers to get started with. help wanted If you know something about this topic, we would love your help!

Comments

@n0099
Copy link
Contributor

n0099 commented Feb 26, 2021

MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions/behavior

What information was incorrect, unhelpful, or incomplete?

The behavior: 'auto' will not always do an instant scroll that jumps to the element as described in the doc.

Specific section or headline?

https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions/behavior#value

What did you expect to see?

auto (default): The scrolling happens with the same value of style scroll-behavior, which is set or inherited on the scrolling element.

Did you test this? If so, how?

Norserium/react-indiana-drag-scroll#53 (comment)

I've tested on chrome and firefox with this change, it's still doesn't work, in fact determining behavior: 'auto' doesn't cancel the effect of scroll-behavior: smooth, and it's an expected behavior standardized by CSSOM.

CSSOM draft says:

If the user agent honors the scroll-behavior property and one of the following are true:
behavior is "auto" and element is not null and its computed value of the scroll-behavior property is smooth
behavior is smooth
...then perform a smooth scroll of box to position. Otherwise, perform an instant scroll of box to position.

It's also been mentioned in stackoverflow and webkit developers

But the MDN doc doesn't mention this, it just says: auto: The scrolling happens in a single jump., it's only correct when there's no scroll-behavior: smooth style applied on the scrolling elements. In wild, I've seen some websites use body { scroll-behavior: smooth; } to make all scrolling executed by js is smooth.

According to the previous stackoverflow answer, the only available workaround for compatible elements with scroll-behavior: smooth style is adding scroll-behavior: auto !important; after https://github.com/Norserium/react-indiana-drag-scroll/blob/329221fc52a79b0af7dc9f3b6fb088535a206879/src/style.css#L3

So I think there's a lack of 'instant' value of ScrollToOptions in CSSOM to allow using js to perform instant scroll without touching style temporarily.

MDN Content page report details
@n0099 n0099 changed the title Issue with "ScrollToOptions.behavior": Description of auto value is wrong. Issue with "ScrollToOptions.behavior": Description of auto value is wrong, lacking historical instant value Feb 26, 2021
@n0099
Copy link
Contributor Author

n0099 commented Feb 26, 2021

I've noticed there's also an undocumented instant value available in firefox and chrome (demo), it will always jumpy scroll to element no matter how the scroll-behavior style is set.

In this email list, it's seems firefox implmented instant value before chrome.

So Gecko internally has:

enum ScrollMode { INSTANT, SMOOTH, NORMAL };

INSTANT is what scrollTo and scrollBy do. NORMAL is done as one scroll,
but possibly async. SMOOTH will do smooth scrolling if the user has
that enabled, and behave like NORMAL otherwise.

@myakura
Copy link
Contributor

myakura commented May 18, 2021

the value instant was the former name of auto.
w3c/csswg-drafts@21b1748

@n0099
Copy link
Contributor Author

n0099 commented May 19, 2021

the value instant was the former name of auto.
w3c/csswg-drafts@21b1748

but browsers treat them as different behavior (might for backward compatible reason).
I think at least MDN should mention that auto will not always do a instant scroll.

@github-actions github-actions bot added the idle label Dec 8, 2021
@teoli2003 teoli2003 reopened this May 29, 2022
@github-actions github-actions bot added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label May 29, 2022
@sideshowbarker sideshowbarker removed the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label May 30, 2022
@sideshowbarker sideshowbarker added good first issue A good issue for newcomers to get started with. help wanted If you know something about this topic, we would love your help! effort: small This task is a small effort. labels Jul 6, 2022
@cmawhorter
Copy link

mdn now reflects "instant" as an allowed option but i'm seeing no mention of it in the the spec linked there apart from being the previous name for auto. should it be on mdn as gospel?

i want to have an instant option, but it seems premature to have it on that page unless i'm not looking at the right spec doc.

@n0099
Copy link
Contributor Author

n0099 commented Oct 18, 2022

These spec won't address behaviors on historical or living browsers that might not match with its expecting standard, that's why the mdn should hint this point.

dawei-wang added a commit to dawei-wang/content that referenced this issue Dec 20, 2022
Josh-Cena added a commit that referenced this issue Dec 21, 2022
* Update behavior parameter

Fixes #2719

* Add intro sentence

* Update files/en-us/web/api/window/scroll/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:WebAPI Web API docs effort: small This task is a small effort. good first issue A good issue for newcomers to get started with. help wanted If you know something about this topic, we would love your help!
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

7 participants