Affected versions

• 83.0a1 (20201011093320)
• 82.0 (20201012131351)
• 81.0.2 (20201012085804)
• 78.3.0esr (20200929151419)

Affected platforms

• Windows 10x64

Steps to reproduce

1. Open Firefox with and log in to https://www.linkedin.com/.
2. Select a random user and hover People Also Viewed users on the right side.

Expected result

• The underline is displayed as expected.

Actual result

• Broken underline is displayed.

Regression range

• Pushlog: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=b338d55d5007ce5a7d4cdce3aaa8e9f63c5555f7&tochange=4cd56624e723867b1e508d73bd8ee82c899f5670

Notes

• Attached a screen recording.
• On macOS 10.12 and Ubuntu 18.04 double underline is displayed on hover users but is not interrupted as it is on Windows 10x64.

Suggested Severity: S3

This is not a Firefox bug, it's bad authoring.

When the user's name is hovered, there are two underline decorations getting applied: one by a rule

a:focus, a:hover {
    text-decoration: underline;
    color: #006097;
}

that applies to the entire <a> element, and then another from a rule

.pv-browsemap-section__member-detail--has-hover:hover .name {
    text-decoration: underline;
    color: var(--color-action,var(--blue-70,#0073b1));
}

that applies just to the name itself.

The latter rule is fine, it underlines the name as expected.

But the underline generated by the a:hover rule may appear at a different height, because the element being decorated is not the <span> that actually contains the name, but an ancestor; and the <span> has been shifted vertically by the rule

.actor-name-with-distance .name-and-icon {
    display: inline-block;
    vertical-align: middle;
}

that applies to its parent. This (depending on font metrics) causes the text to be shifted a bit lower than it would have otherwise been, and results in the glyphs clashing with the underline generated by the ancestor box.

I sent them an email just now.

Thanks!

One other detail: there are potentially two reasons why this doesn't show up as a problem in Chrome. First, the effect of vertical-align:middle depends on details of font metrics, which may vary between browsers and platforms (even for the same font, setting aside the fact that different fonts may be used depending on the environment), so it's unwise to rely on this without extensive testing across different environments.

And second, Chrome does not render underline (or other text-decoration lines) on boxes with descendants in accordance with the CSS spec; it (incorrectly) shifts the underline as if it belonged to the descendant, not the box where the decoration is applied. This is https://bugs.chromium.org/p/chromium/issues/detail?id=1008951, and may often mask authoring errors like this.

This seems to be fixed, the underline is displayed correctly now only under the name.
https://prnt.sc/jHqYrW9nKXbH

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

Alexandru can you still reproduce it ?

Confirming that the issue is no longer reproducing on Windows 10x64 with Firefox Nightly 104.0a1 (2022-07-03) (64-bit), Firefox 103.0b4, and Firefox 102.0. The underline is displayed correctly on hover after following steps from comment 0. Thank you, Oana.