content icon indicating copy to clipboard operation
content copied to clipboard

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

Open n0099 opened this issue 3 years ago • 5 comments

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?

https://github.com/Norserium/react-indiana-drag-scroll/issues/53#issuecomment-786750940

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
  • Folder: en-us/web/api/scrolltooptions/behavior
  • MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions/behavior
  • GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/scrolltooptions/behavior/index.html
  • Last commit: https://github.com/mdn/content/commit/11a98a59fca5f2e448d9e4b70e3c8a538c47b201
  • Document last modified: 2021-02-19T19:45:18.000Z

n0099 avatar Feb 26 '21 16:02 n0099

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.

n0099 avatar Feb 26 '21 17:02 n0099

the value instant was the former name of auto. https://github.com/w3c/csswg-drafts/commit/21b1748b746bc7aa5eb1b00fd7c1a53c2235efcb

myakura avatar May 18 '21 06:05 myakura

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.

n0099 avatar May 19 '21 14:05 n0099

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.

cmawhorter avatar Oct 17 '22 23:10 cmawhorter

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.

n0099 avatar Oct 18 '22 00:10 n0099