User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0

Steps to reproduce:

Go to https://www.bbc.com/sport/formula1 in 70.0b9 and hover the cursor over any of the major headlines, notice how messed up it looks. In attached screenshot, I put red rectangle around the headlines (there are more headlines if you scroll down the page)

The underlining of those headlines/links when hovered is pretty bad even without the skip-ink behavior, because they clash badly with the glyphs.

This is happening because the underline is applied to the <a> element, but then the actual text is wrapped in a <span> that has vertical-align:middle, which shifts the text somewhat downwards and results in it hitting the underline that belongs to its parent <a>.

So Firefox is behaving correctly per spec, but the site is badly designed.

Do we have contacts at the BBC who might be able to look into this? They really should apply the underlining to the element that contains the text (i.e. the <span> here), not to a parent element that may have a different baseline (because of their use of vertical-align).

Curiously, flipping through the various sport pages on the BBC site, some of them suffer from this issue (e.g. F1, Rugby Union, Rugby League, Golf) while others don't (e.g. Football, Cricket).

(In reply to Jonathan Kew (:jfkthame) from comment #1)

Created attachment 9096867 [details]
underlines without skip-ink

The underlining of those headlines/links when hovered is pretty bad even without the skip-ink behavior, because they clash badly with the glyphs.

This is happening because the underline is applied to the <a> element, but then the actual text is wrapped in a <span> that has vertical-align:middle, which shifts the text somewhat downwards and results in it hitting the underline that belongs to its parent <a>.

So Firefox is behaving correctly per spec, but the site is badly designed.

Out of curiosity, why isn't this issue present in Chrome?

(In reply to Will from comment #4)

Out of curiosity, why isn't this issue present in Chrome?

Because Chrome incorrectly (i.e. in violation of the CSS spec) draws underlines separately for child elements, so the vertical-align on the inner <span> causes the underline to move along with the text.

This is generally not desirable because of the effect it has on things like

data:text/html,<u>Friday 27<sup>th</sup> September</u>
data:text/html,<u>Don't confuse H<sub>2</sub>O with H<sub>2</sub>SO<sub>4</sub>!</u>

Chrome's behavior on examples like this is specifically called out as wrong in the spec.

Screenshot: Mouse hovering over headline 5

Since being updated to FF 70 two days ago, i'm noticing the exact same thing with the BBC headlines (see attachment above). Here's hoping that someone at the BBC will notice this eventually, now that FF 70 is being rolled out.

Mike, can we reach out to the BBC about this? See above for discussion of what's wrong in how the pages are constructed/styled.

Jonathan, do you know whether either Chrome or Safari have any plans to align with the spec on the child-underlining behavior?

(In reply to Boris Zbarsky [:bzbarsky, bz on IRC] from comment #9)

Jonathan, do you know whether either Chrome or Safari have any plans to align with the spec on the child-underlining behavior?

No, I'm not aware of any activity. FWIW, I did recently file a chromium bug https://bugs.chromium.org/p/chromium/issues/detail?id=1008951 to remind them about this (although it's a longstanding spec violation on their side). I think Emilio's older report in https://bugs.chromium.org/p/chromium/issues/detail?id=855589 is another aspect of the same underlying issue, but there's no sign of movement there either.

Sorry for the delay here -- I've sent a message to our BBC partner mailing list.

https://bugs.webkit.org/show_bug.cgi?id=190772 is the webkit bug

I wonder if we should try fixing this bug in WebKit as way to get some leverage? See also https://github.com/w3c/csswg-drafts/issues/5002

Perhaps, though looking at the WebKit code it doesn't look quite trivial to change.

It seems their whole text decoration painting code is based on propagating the text decorations all the way to the text node, so it needs significant changes.

I can't reproduce the issue on my side. The underlines are displayed correctly now.
https://prnt.sc/VZVBD-z2UWPT
https://prnt.sc/j1A0UEtjQy5q

Tested with:
Browser / Version: Firefox Nightly 104.0a1 (2022-06-28)
Operating System: Windows 10 Pro

Will can you still reproduce this?

Example in FF 102.0

(In reply to Oana Arbuzov [:oanaarbuzov] from comment #21)

https://prnt.sc/VZVBD-z2UWPT
https://prnt.sc/j1A0UEtjQy5q

The screenshots do not load, but did FF Nightly add a fix for this? Because in FF 102.0 the problems are still there, see above. I only noticed that with 150% zoom or 70%, the underline is perfect (unbroken). But in pretty much all other zoom states including 100%, it looks like above for me.

Looks like the BBC site has changed -- I no longer see the issue on the Sport/F1 page, as originally reported, but I do see it on the "Most read" list on the main News page (https://news.bbc.co.uk/, scroll down to find "Most read") as shown in comment 22.

It's still a site bug, not a Firefox bug, though. And I believe there's work in progress to fix Chrome's behavior, such that it will show the same "problem" as Firefox, so maybe they'll finally get motivated to fix the site. (I see the same thing on the BBC site with Chrome Canary on macOS.)

I can no longer repro (just commenting this to get the NEEDINFO to go away)

Fwiw, Safari Technology Preview 154, which has a simplified version of decorating box semantics implemented, does not have this bug (from the STR in comment 24).

@ntim: I tried Safari Tech Preview 155, and it appears that a slight difference in its result of vertical-align: middle with the BBC Reith font means that it doesn't hit this issue on that particular site. However, you can reproduce the effect with a reduced example such as

data:text/html,<h1 style="font:24px Arial"><a href="."><span style="vertical-align:middle">Link text with vertical-align:middle</span></a>

which has equivalent styling of the link, with the underline applied to the <a> element but the actual text inside a vertical-align:middle child. (Whether the "problem" appears will depend on the browser's handling of the line-height/baseline metrics of the font involved, but the pattern is inherently fragile.)