mdn / mdn/browser-compat-data

css.types.color.{oklab,oklch} - Add notes for Lab/Oklab interop issue at lightness 0/100%

Open
#22,646 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

browser:multiple data:css
Dominant language
JSON
Stars
5.8k
Forks
2.6k
Avg merge
1d 21h
Merged PRs (30d)
186

Description

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?

There's a difference in how browsers handle cases like oklab(100% 0.15 0.15) and oklab(0% 0.15 0.15), due to a special handling of this that was landed in Chrome:
https://issues.chromium.org/issues/329106317

It affects these 4 color functions:
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch

What browsers does this problem apply to, if applicable?

No response

What did you expect to see?

Notes should warn developers against using lightness 0% or 100% together with non-zero values of a/b or chroma, because it won't look the same in all browsers.

Did you test this? If so, how?

This is tested in WPT:
https://wpt.fyi/results/css/css-color?label=master&label=experimental&aligned&q=almost

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

No response

Do you have anything more you want to share?

No response

MDN URL

No response

MDN metadata

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the css.types.color entries for oklab, oklch, lab, and lch, then compare the relevant WPT results linked in the issue. Check how notes are represented in those entries; done means all four functions warn about non-zero a/b or chroma at 0% or 100% lightness.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.