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.

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

Update all browsers data for css.types.image.*-gradient #21472

Merged

Conversation

queengooborg
Copy link
Collaborator

This PR updates and corrects version values for all browsers for the *-gradient member of the image CSS value type. This adds a premultiplied_gradients subfeature to all three gradient types, as all browsers (not just Firefox) had this issue in the past. In a way, this fixes #14598.

Test Code:

<div id="test"></div>
<style>
	body {
		background-color: black;
	}
	#test {
		height: 100vh;
		background: linear-gradient(to bottom, red, rgba(255, 255, 255, 0));
	}
</style>

If the gradient started to transition into white, then premultiplication was not performed. If the gradient faded perfectly to black, premultiplication was performed properly.

This PR updates and corrects version values for all browsers for the `*-gradient` member of the `image` CSS value type. This adds a `premultiplied_gradients` subfeature to all three gradient types, as all browsers (not just Firefox) had this issue in the past.  In a way, this fixes mdn#14598.

Test Code:
```html
<div id="test"></div>
<style>
	body {
		background-color: black;
	}
	#test {
		height: 100vh;
		background: linear-gradient(to bottom, red, rgba(255, 255, 255, 0));
	}
</style>
```

If the gradient started to transition into white, then premultiplication was not performed.  If the gradient faded perfectly to black, premultiplication was performed properly.
@queengooborg queengooborg added the data:css 🎨 Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS label Dec 5, 2023
Copy link
Member

@teoli2003 teoli2003 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this way of solving it.

@teoli2003 teoli2003 merged commit 3bb35e5 into mdn:main Dec 21, 2023
6 checks passed
@queengooborg queengooborg deleted the css/types/image/-gradient/all-corrections branch December 21, 2023 11:59
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "36"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left a comment about this on the associated issue for this PR: #14598 (comment). It turns out Firefox doesn’t support premultiplied alpha in gradients correctly even in the latest version of Firefox. So this entry is incorrect. Here’s the link to the Firebox bug I filed for this, which has been confirmed: https://bugzilla.mozilla.org/show_bug.cgi?id=1869681.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am noticing a difference in the gradient in Firefox vs. other browsers using the test code you provided in the bug:

image

(Top-Left: Chrome, Bottom-Left: Safari, Top-Right: Firefox)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
data:css 🎨 Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS
Projects
None yet
Development

Successfully merging this pull request may close these issues.

css.types.image.gradient.linear-gradient - the status of Firefox is confusing
3 participants