Why do Chrome and Edge show text-shadow over hyperlink underline?

Question

I've noticed something odd about the way Chrome and Edge render text-shadows on hyperlinks.

For example, I have a situation where I apply two text-shadows to several paragraph elements. One of these paragraphs is only a standard hyperlink with text-decoration: underline;. Here's the HTML and CSS:

<p class="header__text">
    <a href="https://google.com">See the 2021 edition ...</a>
</p>

.header__text {
    color: #fff;
    text-shadow: 2px 2px 2px #000, 1px 1px 24px #000;
    padding-left: 16px;
    padding-right: 16px;
}
a {
    color: #c62828;
}

This renders the way I would expect in Safari and Firefox (Mac and PC), with the shadow completely underneath the text and the underline.

But in Chrome (Mac and PC) and Edge, the text-shadow falls under the text, but over the hyperlink's underline.

I don't understand why the shadow behaves like this in those two browsers. Is this just a bug? Is there some Blink-specific property I should override to stop this behavior?

score 2 · Accepted Answer · edited Jan 18 '22 at 17:07

From my reading the underline should be the first to be drawn. That is underneath what comes next which seems to be text-shadow if my reading is correct.

From https://drafts.csswg.org/css-text-decor/#painting-order the painting order is:

As in [CSS2], text decorations are drawn immediately over/under the text they decorate, in the following order (bottommost first):

shadows (text-shadow)

underlines (text-decoration)

overlines (text-decoration)

text

emphasis marks (text-emphasis)

line-through (text-decoration)

That is, it seems as though the shadows should be overlaid by the underline but that Chrome (Edge) do not follow this.

Why do Chrome and Edge show text-shadow over hyperlink underline?

1 Answers1