[csswg-drafts] [cssom-view] Inconsistencies between partially offscreen scroll-into-view (#4778)

bokand has just created a new issue for https://github.com/w3c/csswg-drafts:

== [cssom-view] Inconsistencies between partially offscreen scroll-into-view ==
I've noticed some inconsistencies between engines in how scrollIntoView() and focus() scroll partially offscreen elements.

In https://crbug.com/916631 I removed a magic constant in Blink for elements partially offscreen horizontally - this was [inherited from](https://crrev.com/ee5bc3acd0986e8fa87df7f804c49c120b8c9bc2) WebKit and meant that an element horizontally onscreen by at least 32 pixels was considered "fully visible" for ScrollIntoView.

However, this led to bugs like https://crbug.com/1036817. I realized that for vertical-only list controls, there isn't a good way to make them clip horizontally (overflow-x: hidden) but navigable vertically; moving focus to a vertically offscreen element should scroll it to view but we shouldn't scroll horizontally.

This appears to have been the intent of the magic constant but I think for element.scrollIntoView makes it hard for authors to reason about hence the above change in Blink (to match Gecko; @emilio added a [WPT test](https://wpt.fyi/results/css/cssom-view/scrollIntoView-horizontal-partially-visible.html?label=experimental&label=master&aligned) for this too).

It seems like it'd make sense to apply this special non-scrolling behavior just for focus()? The [focus() spec](https://html.spec.whatwg.org/#dom-focus) gives UA some latitude in how the scrollIntoView is done but I wonder if we should try to align behavior between engines? Also, not scrolling technically isn't a valid option for ScrollIntoViewOptions AFAICT.

Interestingly, it appears Firefox does avoid scrolling a partial element onscreen from focus. I'm going to make the same change in Blink but I'm having a hard time exactly determining Gecko's behavior. It looks like there's some kind of threshold too (10px onscreen is scrolled but 50px is not) but testing locally on Linux in FF73 I see focus() scrolls both axes into view whereas (using browserstack) on Windows/Mac it only scrolls the vertical axis. @emilio - can you help me understand what's going on here?

Here's a test page that demonstrates the differences between scrollIntoView and focus with differing amounts of scrollport overlap: https://jsbin.com/sewewam

@smfr for WebKit and whether we can align behavior here.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4778 using your GitHub account

Received on Friday, 14 February 2020 21:13:18 UTC