Different Precedence of text-decoration and text-shadow in Firefox vs Chrome

Issue

This HTML/CSS renders differently in Firefox versus Chrome — the layering of the text-decoration and the text-shadow are swapped.

.foo {
    font-size:2em;
    text-decoration:underline LightBlue 1ex; 
    text-decoration-skip-ink:none; 
    text-underline-offset:-1ex; 
    text-shadow: 1px 1px 3px HotPink;
}
    

<spann class="foo">
   Gaze upon this text in Firefox and Chrome. 
</span>

Here are screenshots:

Firefox

Chrome

What's going on here? Is one browser implementing the standard incorrectly? Can the CSS be written to ensure consistency without detecting the browser and styling in cases?

Solution

From the Text-decoration Level 3 specification:

The shadow must be painted at a stack level between the element’s border and/or background (if present) and the elements text and text decoration.

That is, the text shadow must be painted before the underline, and so the underline will cover the text shadow. So Firefox's rendering is the correct one.

This is recorded as Chromium Bug Issue 713376: Text shadow should paint behind all text decorations and text.

Answered By - Alohci