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

css.properties.paint-order - Chrome incorrectly reported as having full support #17951

Closed
rsek opened this issue Oct 7, 2022 · 1 comment · Fixed by #21426
Closed

css.properties.paint-order - Chrome incorrectly reported as having full support #17951

rsek opened this issue Oct 7, 2022 · 1 comment · Fixed by #21426
Labels
data:css 🎨 Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS

Comments

@rsek
Copy link

rsek commented Oct 7, 2022

What type of issue is this?

Browser bug (a bug with a feature that may impact site compatibility)

What information was incorrect, unhelpful, or incomplete?

Chromium-based browsers are indicated as having 'full support' for paint-order in CSS. But I don't think this is the case in the most practical sense, because they don't support paint-order with -webkit-text-stroke; to the best of my knowledge, other major browsers do support it. Here's the open issue with more specific information: https://bugs.chromium.org/p/chromium/issues/detail?id=815111

What browsers does this problem apply to, if applicable?

Chromium (Chrome, Edge 79+, Opera, Samsung Internet)

What did you expect to see?

Until the bug is resolved, it'd be good to see a note or callout box indicating that Chromium-based browser do not offer the same support as other major browsers. Ideally, there would also be an additional demonstration of paint-order's interaction with HTML text specifically, to make the difference apparent even at a glance to Chromium users viewing the article.

It would also be useful to see the same information called out on the -webkit-text-stroke article, as the two properties are often paired.

I've included some example HTML/CSS to that end, below. :)

Did you test this? If so, how?

Example rendering by Firefox 105.0.2 on OSX (12.3.1):
Screen Shot 2022-10-06 at 5 52 22 PM

Example rendering by Chromium 105.0.5195.125 on OSX (12.3.1):
Screen Shot 2022-10-06 at 5 54 05 PM

These can be reproduced with the following code. A codepen is available here: https://codepen.io/rsek/pen/jOxvxbz

<p class="stroke-text">stroke in front</p>
<p class="stroke-text stroke-behind">stroke behind</p>
.stroke-text {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  color: black;
  -webkit-text-stroke: red 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}

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

https://bugs.chromium.org/p/chromium/issues/detail?id=815111

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order

MDN metadata

MDN page report details
  • Query: css.properties.paint-order
  • Report started: 2022-10-07T00:08:46.008Z
@queengooborg queengooborg added the data:css 🎨 Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS label Oct 8, 2022
@jules-contact

This comment was marked as off-topic.

kepstin added a commit to kepstin/browser-compat-data that referenced this issue Dec 2, 2023
Browser support for CSS `paint-order` on HTML text differs between
browsers. This is because as originally specified, the property had a
restriction saying that it should only apply to SVG. That restriction
has since been removed, see w3c/fxtf-drafts#107

Support for `paint-order` on HTML text was included along with the
initial support for `paint-order` in Firefox 60, see
https://bugs.webkit.org/show_bug.cgi?id=168601

Support for `paint-order` on HTML text was added to WebKit in
WebKit/WebKit@73a116f
which was included in WebKit 604. According to browsers/safari.json,
this corresponds to Safari 11.

Support for `paint-order` on HTML text in Chromium is still pending:
https://bugs.chromium.org/p/chromium/issues/detail?id=815111

Fixes mdn#17951
Fixes mdn#19154
kepstin added a commit to kepstin/browser-compat-data that referenced this issue Dec 2, 2023
Browser support for CSS `paint-order` on HTML text differs between
browsers. This is because as originally specified, the property had a
restriction saying that it should only apply to SVG. That restriction
has since been removed, see w3c/fxtf-drafts#107

Support for `paint-order` on HTML text was included along with the
initial support for `paint-order` in Firefox 60, see
https://bugs.webkit.org/show_bug.cgi?id=168601

Support for `paint-order` on HTML text was added to WebKit in
WebKit/WebKit@73a116f
which was included in WebKit 604. According to browsers/safari.json,
this corresponds to Safari 11.

Support for `paint-order` on HTML text in Chromium is still pending:
https://bugs.chromium.org/p/chromium/issues/detail?id=815111

Fixes mdn#17951
Fixes mdn#19154
Elchi3 pushed a commit that referenced this issue Dec 8, 2023
…ty (#21426)

Browser support for CSS `paint-order` on HTML text differs between
browsers. This is because as originally specified, the property had a
restriction saying that it should only apply to SVG. That restriction
has since been removed, see w3c/fxtf-drafts#107

Support for `paint-order` on HTML text was included along with the
initial support for `paint-order` in Firefox 60, see
https://bugs.webkit.org/show_bug.cgi?id=168601

Support for `paint-order` on HTML text was added to WebKit in
WebKit/WebKit@73a116f
which was included in WebKit 604. According to browsers/safari.json,
this corresponds to Safari 11.

Support for `paint-order` on HTML text in Chromium is still pending:
https://bugs.chromium.org/p/chromium/issues/detail?id=815111

Fixes #17951
Fixes #19154
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 a pull request may close this issue.

3 participants