Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

css.properties.accent-color - Partial support in Safari #16367

Closed
pepkin88 opened this issue May 19, 2022 · 0 comments · Fixed by #23473
Closed

css.properties.accent-color - Partial support in Safari #16367

pepkin88 opened this issue May 19, 2022 · 0 comments · Fixed by #23473
Labels
data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS

Comments

@pepkin88
Copy link

What type of issue is this?

Incorrect support data (ex. Chrome says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

The support for accent-color is incomplete in Safari. The spec says:

The UA must maintain contrast for legibility of the control, and in order to do so may adjust the luminance or brightness of the color or make color substitutions in other parts of the control (e.g. switching an overlaid glyph from using color to using background-color).

and it seems that the Safari browser doesn't adjust some form controls for a better contrast.

What browsers does this problem apply to, if applicable?

Safari

What did you expect to see?

On a Chromium browser, you can see that the tick and the dot in the checkbox and radio controls are automatically adjusted to have a better contrast:
image

but on Safari, with a bright accent color, I still get white ticks and dots:
image

Did you test this? If so, how?

I wrote the following piece of code and opened it in a Chromium browser and Safari:

<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color: #333; accent-color: #ef0; transform: scale(5); transform-origin: 0 0;">
	<input type="checkbox" checked>
	<input type="radio" checked>
</body>
</html>

Chromium browser: Vivaldi | 5.2.2623.46 (Stable channel) (arm64)
Safari: Version 15.4 (17613.1.17.1.13)

But perhaps a better test would be that one here: https://accent-color.glitch.me
Here's a screenshot from Safari:
image

As you can see, the accent color sometimes is completely different than requested.

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

I don't know, if that's relevant, but here is a ticket for a general feature on webkit.org https://bugs.webkit.org/show_bug.cgi?id=227587

There's also this issue here to add the support for Safari #13301 but as you can see above, the implementation is only partial.

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color

MDN metadata

MDN page report details* Query: `css.properties.accent-color`* Report started: 2022-05-19T12:15:10.439Z
@queengooborg queengooborg added the data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS label May 19, 2022
queengooborg added a commit to queengooborg/browser-compat-data that referenced this issue Jun 20, 2024
@queengooborg
Update Safari data for accent-color CSS property
a371664 
This PR updates and corrects version values for Safari (Desktop and iOS/iPadOS) for the `accent-color` CSS property. This fixes mdn#16367, which contains the supporting evidence for this change.
@queengooborg queengooborg mentioned this issue Jun 20, 2024
Merged
@jamesnw jamesnw mentioned this issue Dec 3, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Update Safari data for accent-color CSS property queengooborg/browser-compat-data
2 participants
@pepkin88 @queengooborg