paint-order attribute ignored on Chrome

user_5583560 0
Viewed 1035

I am attempting to style some text, with white text and a black stroke. I want it to have a thick stroke while still having the text be visible.

For this, I used the following CSS:

element {
    -webkit-text-stroke: 6px black;
    color: white;
    paint-order: stroke;
}

However, paint-order does not function properly on Chrome browsers. Here is a demonstration, Firefox on the left and Chrome on the right. You can see on the right that Chrome is not honoring the paint-order attribute, despite supposedly being compatible since version 35.

enter image description here

The CodeSandbox I made to demonstrate.

Is there some additional attribute needed for this to work on all browsers? My Chrome version is 80.0.3987.132 and Firefox is 74.0.

css
2 Answers

Chrome only supports paint-order on SVG text. There is no support for HTML text, although it could be supported in the future since it's supported in Firefox and Safari. In the meantime you can use text-shadow as a fallback for Chrome and older browsers.

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

user_117623960

edit to anyone falling here , text-shadow is still the fallback to use for HTML/CSS and IE11, but FF,Chrome and edge will apply it to your SVG.

-webkit-text-stroke, is non-standard and off standards track, where IE11 also fails .

original answer

Does your browser supports paint-order ?

check it here : https://caniuse.com/#feat=mdn-css_properties_paint-order

you can use many text-shadow to get the blur effect finally looking alike a stroke effect as a possible alternative:

demo of the idea that's worth what it is:

h1, h2 {
color:white;
text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black,0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black,0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black,0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black;
letter-spacing:4px;
}

/* dummy demo */
h2 {
text-shadow: 
   0 0 2px blue,0 0 2px blue,0 0 2px blue,0 0 2px blue,0 0 2px blue,
   0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white, 0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white, 0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white, 0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,
   0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson;
   }
<h1>Hello The World</h1>
<h2>Hello The World</h2>

If you want to implement this average text-shadow stroking only where paint-order is not implemented, @supports could be usefull https://developer.mozilla.org/en-US/docs/Web/CSS/@supports / https://caniuse.com/#feat=css-featurequeries

user_24420990
Related