W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2018

[csswg-drafts] [css-scroll-snap] Different browsers implement keypress scrolling differently

From: Hazel Seanor via GitHub <sysbot+gh@w3.org>
Date: Mon, 16 Jul 2018 19:23:35 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-341645878-1531769014-sysbot+gh@w3.org>
cruxicheiros has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-scroll-snap] Different browsers implement keypress scrolling differently ==
**Relevant section:** https://drafts.csswg.org/css-scroll-snap/#scroll-padding
**Related to thread** "define scroll amount by CSS" http://lists.w3.org/Archives/Public/www-style/2018Jul/subject.html

CSS Scroll Snap introduces the attribute `scroll-padding` which allows CSS style sheets to specify an offset that the page will not scroll into when the `space` or `page down` buttons are used to scroll. This is important because otherwise, text that the user had not yet scrolled to would be hidden behind the header.

However, Firefox attempts to automatically detect sticky headers and does this already (described in [this Bugzilla post](https://bugzilla.mozilla.org/show_bug.cgi?id=780345). From my testing, Chrome, Edge, and Opera do not have this feature, making Firefox the odd one out.

I have created a [demo site](https://cruxicheiros.github.io/scrollamountdemo/) to help easily demonstrate this difference.

The reason this is relevant to CSS Scroll Snap is that with its introduction, guidance should be given on how scrolling should work when the attribute is not present. Scrolling behaviour should be standard across browsers.

Firefox's approach has benefits in that it fixes the problem `scroll-padding` aims to solve on already-existing websites. Therefore it might be beneficial for other browsers to do similarly. However, this could result in clashes when `scroll-padding` is used in a stylesheet on a website the browser has detected as using a fixed header and has already applied an offset to.

Firefox's detector, however, is not perfect and does not work on all sites. [This page is an example where the offset should be applied and isn't.
](http://www.thisisplace.org/i/?id=0150beca-e3f5-47e0-bc74-9ccc5ef1db8a)

Thank you.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2929 using your GitHub account
Received on Monday, 16 July 2018 19:23:41 UTC

This archive was generated by hypermail 2.3.1 : Monday, 16 July 2018 19:23:43 UTC