Bug 200643 - CSS scroll-snap-related properties should propagate <html> to the viewport (but not from the body)
Summary: CSS scroll-snap-related properties should propagate <html> to the viewport (b...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 12
Hardware: Mac macOS 10.14
: P2 Normal
Assignee: Tim Nguyen (:ntim)
URL:
Keywords: InRadar
Depends on:
Blocks: 218115
  Show dependency treegraph
 
Reported: 2019-08-12 14:28 PDT by Miriam Suzanne
Modified: 2022-08-15 10:28 PDT (History)
5 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Miriam Suzanne 2019-08-12 14:28:34 PDT
Example: 
- https://s.codepen.io/mirisuzanne/debug/yLBNpdQ

Expected Behavior:
- `scroll-padding` and `scroll-snap-type` should be applied to the default viewport scrolling.

Actual Behavior:
- Neither property is applied, so there is no scroll-snapping or scroll offset applied
- The demo only works if you set the properties on `body` instead of `html`, which is counter-to-spec and breaks the (proper) Firefox implementation

Related:
- Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=952711
- CSSWG discussion: https://github.com/w3c/csswg-drafts/issues/3740

[Note that *neither* `body` nor `html` seems to work inside an iframe, which is why I link to the "debug" view in codepen. The original pen is available here: https://codepen.io/mirisuzanne/pen/yLBNpdQ?editors=1100)
Comment 1 Radar WebKit Bug Importer 2019-08-13 15:35:07 PDT
<rdar://problem/54277211>
Comment 2 Majid Valipour 2019-10-21 06:31:57 PDT
As of Chrome 78, Blink is changing its behavior [1] to match specification and Gecko. Hopefully we will manage to get this done without lots of compat issues which should help Safari to attempt the fix as well.


[1] https://bugs.chromium.org/p/chromium/issues/detail?id=952711
Comment 3 Simon Fraser (smfr) 2019-10-21 16:43:28 PDT
I think the propagate from <body> too, right?
Comment 4 Majid Valipour 2019-10-21 17:12:33 PDT
> I think the propagate from <body> too, right?

While that is true for 'overflow' but it not the case for these more recent properties such as 'scroll-snap-type' and others. The scroll-snap spec is explicit about this now: https://drafts.csswg.org/css-scroll-snap/#scroll-snap-type

"UAs must apply the scroll-snap-type value set on the root element to the document viewport. Note that, unlike overflow, scroll-snap-type values are not propagated from HTML body."  

The relevant spec discussion and decision are documented here: 
https://github.com/w3c/csswg-drafts/issues/3740
Comment 5 Martin Robinson 2020-11-06 02:28:09 PST
Now that issue 210469 is closed, these properties do propagate from <html>, but they still propagate from <body> for backwards-compatibility reasons. Perhaps this bug could be repurposed to track the possible eventual removal of propagation from <body>
Comment 6 Tim Nguyen (:ntim) 2022-08-12 22:31:19 PDT
Pull request: https://github.com/WebKit/WebKit/pull/3287
Comment 7 EWS 2022-08-15 10:28:10 PDT
Committed 253430@main (54380c808801): <https://commits.webkit.org/253430@main>

Reviewed commits have been landed. Closing PR #3287 and removing active labels.