paint-order attribute ignored on Chrome

Question

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.

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.

Answer 1

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