css.properties.text-decoration-skip-ink - Safari is not respecting the `none` property

[pawelgrzybek]

What type of issue is this?

Incorrect support data (example: BrowserX says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

The text-decoration-skip-ink: none is not supported on Safari, but it is marked as supported.

What browsers does this problem apply to, if applicable?

Safari

What did you expect to see?

For the value none i would expect the underline not to skip glyphs.

Did you test this? If so, how?

I did test across it across the browsers. Chrome and Firefox implementation looks right, Safari is not. I am attaching a video below that presents the behaviour on Chrome (left) and Safari (right).

text-decoration-skip-ink.mp4

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink#try_it

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink

MDN metadata

MDN page report details

• Query: css.properties.text-decoration-skip-ink
• Report started: 2024-10-18T06:18:41.119Z

[caugner]

Refs:

• Bug: https://bugs.webkit.org/show_bug.cgi?id=283226
• Fixed in WebKit/WebKit@2382284 (WebKit 621.1.6) before Safari 18.4.

[caugner]

Based on the WebKit commit message, this issue only affects cases where text-decoration: underline is set on a parent (box context), and text-decoration-skip-ink: auto on the inline box. If both are set together on the inline box, there is no issue.

We have three options:

1. Add notes to the Safari statement, explaining the limitation: "Before Safari 18.4, text-decoration-skip-ink was ignored on inline boxes without decoration style."
2. Mark Safari as partial before 18.4.
3. Add a subfeature css.properties.text-decoration-skip-ink.inline_context in text-decoration-skip-ink.json, marking Safari as partial before 18.4.

Overall, option 1 should be fine, as developers would presumably set text-decoration and text-decoration-skip-ink together most of the time.

But it would be great to have a second opinion from @Elchi3 or @ddbeck.

PS: For what it's worth, I created this JSBin to test text-decoration-skip-ink: all/auto/none on div and span.

[ddbeck]

1. Add notes to the Safari statement, explaining the limitation: "Before Safari 18.4, text-decoration-skip-ink was ignored on inline boxes without decoration style."

This seems right. If there was a bug that mentioned this being an issue for anything but the MDN interactive example, I'd have some more reservations, but it looks like toggling the skip ink is just a strange thing to do. If I'm following my guideline in #26780, we're not required to set partial here, since there's no impact on feature detection (that is to say, skipping is on by default and it'd be very strange to feature detect turning it off).

(And if developers tell us we're wrong about this, we can promote it to partial later.)

[caugner]

Thanks Daniel.

@pawelgrzybek Would you like to open a PR with the proposed changes (i.e. adding notes to this Safari support statement)? 🙏