Browser-compat-data: Safari does not support scroll-margin

[dakur]

According to my tests, Safari does not support scroll-margin even it is stated it does. Try to open this pen and click scroll to heading or scroll through example in this article in Safari and see it does not scroll to proper position.

Safari 11+

Maybe related to #4497

[hacknug]

Still not suported:

[LukeChannings]

Hey! I was just about to file a bug on this myself.

Safari does support scroll-margin, it's just that it was renamed from scroll-snap-margin and Safari hasn't renamed it yet. Defining both scroll-margin and scroll-snap-margin is how I fixed my issue.

There is a bug against Webkit here.

Safari does not, however, support scroll-margin-block* or scroll-margin-inline*, which the compatibility table currently says it does.

[dakur]

@LukeChannings That sounded promising, however when I tried to modify the linked pen to include scroll-snap-margin-top as well, the result on Safari did not change – there is still no offset from the top and the heading is hidden under fixed menu.

[LukeChannings]

My use case is with a container that has scroll-snap-type set. I believe Safari requires that, as mentioned in #4497.

From the spec:

If a page is navigated to a fragment that defines a target element (one that would be matched by :target, or the target of scrollIntoView()), the UA should use the element’s scroll snap area, rather than just its border box, to determine which area of the scrollable overflow region to bring into view, even when snapping is off or not applied on this element.

This isn't implemented in Safari, the ticket against Webkit I linked will implement this behaviour.

[dakur]

@LukeChannings Well, even with scroll-snap-type, I can not make it work. Can you try to change the code on codepen in the way you outlined so that it works?

Also, your use-case for scroll-margin is probably a bit different than mine. I need it when scrolling to an anchor using href="#..." but there is fixed/sticky positioned navbar on the page as well. scroll-margin-top on the anchor target element shoud make sufficient offset so that the targeted heading is not hidden behind the navbar.

[dakur]

5642 is not a fix. scroll-snap-margin does not work for me in Safari – see above.

[dakur]

Current summary: it looks like scroll-margin can be used with or without scroll-snap-type.

If used within, the use-case is to make a scroll offset when snapping to an element start/center/end during scrolling. This should work in Safari with its alternative name scroll-snap-margin, but I have not seen working example yet. It works, see https://github.com/mdn/browser-compat-data/issues/4945#issuecomment-597496640.

If used without, the use-case is to make a scroll offset when scrolled to an element using href="#whatever". This does not work in Safari either way.

[fabb]

These insights sound like they should be listed on caniuse: https://caniuse.com/#search=scroll-margin

[dakur]

@fabb

These insights sound like they should be listed on caniuse: https://caniuse.com/#search=scroll-margin

That's the point of this issue because data from here are propagated to Caniuse in case of this property. The only thing is that somebody has to write down these thoughts into the JSON file and as it is not trivial (some disjunctions), I had not yet time to study its syntax.

[fabb]

I found the schema documentation, and it looks like we need to define an alternative_name for the scroll-snap-* attributes, and partial_implementation and notes for the missing implementation of scroll margins/paddings when snapping is off.

https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#alternative_name

https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#partial_implementation

As far as I can see, there are a few different files that need to be edited like this one: https://github.com/mdn/browser-compat-data/blob/master/css/properties/scroll-margin-top.json

[fabb]

Looks like there are 11 attribute compat data files that need to be changed for the scroll-margin-* attributes: https://github.com/w3c/csswg-drafts/commit/0b1ff98e52898d61044780f86d56384602397914

[fabb]

Current summary: it looks like scroll-margin can be used with or without scroll-snap-type.
[..]
If used without, the use-case is to make a scroll offset when scrolled to an element using href="#whatever". This does not work in Safari either way.

I wonder if safari supports scroll-padding for that second case. Would be a viable fallback that could be used with @supports, and would be valuable to add to the scroll-margin-* compat notes. I need to check that.

[fabb]

Seems like Safari also does not support scroll-padding when snapping is off unfortunately:
https://codepen.io/fabb64/pen/YzXYQPW

EDIT: found the corresponding webkit bug: https://bugs.webkit.org/show_bug.cgi?id=179379

[fabb]

I have created a PR, please review if the wording makes sense and if I have covered all affected properties: #5803

[fabb]

Here‘s a webkit demo page for scroll snapping, does not include scroll-margins/paddings though:
https://webkit.org/demos/scroll-snap/

When adding scroll-padding or scroll-snap-margin on that page, that works fine with scroll snapping enabled.

[dakur]

Something is cooking in WebKit!

Original bug 189265 has been split into two:

• 218075 Rename scroll-snap-margin to scroll-margin
• 218076 Make scroll-margin independent of scroll snapping and have it apply when scrolling to anchors

The first of them started to being resolved, the second one will hopefully follow.

[dakur]

This issue has been resolved in Safari now, so let's looking forward to next release hopefully containing it already.

[ddbeck]

@dakur can you write this up as a new issue? I'm concerned that this information is likely to be lost, since it doesn't really make sense to reopen this issue.

[dakur]

@ddbeck I'm writing this here so that people involved in this issue from before would know about the move in webkit. But there is no change yet in browser support table so I don't see a point in opening new issue.. Once it is released in Safari, it would make sense to me to open pull request with updated data.

[dakur]

@fabb Could you please update data once again? From here (section Scroll Snap) is visible, that these bug fixes made its way as Release 117. And from here is visible, that 117 is current TP.

So we should update it that it works from Safari TP. This should be green now:

Thank you!

[fabb]

Wow that‘s cool! I have to try it out in TP. I‘ll add updating the data to my todo list, but if someone else gets around doing it before me, have fun, just let me know here.

[fabb]

Ok I created a PR, but I'm not sure how to target Safari TP

[dakur]

Great, thanks, hopefully someone will answer.

[fabb]

Does not look like it. Anyone we could mention?

[dakur]

There is reviewer set on the PR so I guess they will get to it..

[dakur]

Just for information – ETA of landing this in Safari could be end of March as they usually release major version in September and minor version in March (source). But still, no one can say..