1470136 - [WIN] Text descenders are clipped/covered on linkedin's "profile strength" section (with hardcoded line-height and "overflow-y:hidden")

Status: NEW

(Core :: Layout: Text and Fonts, defect, P5)

Description

[Cristian Fogel [:cfogel]]

Attachment: linkedin_textTruncated.png

[Affected versions]:
- Firefox: 60.1.0esr, 61.0, 62.0a1 (2018-06-19)

[Affected platforms]:
- win 7x32

[Steps to reproduce]:
1. Launch Firefox;
2. Access https://www.linkedin.com/ and log in with a valid account;
3. Click on the Welcome [username] button;
4. Scroll down until the profile strength section is vissible;
5. Click on the next button 

[Expected result]:
- The bolded text in the section is not truncated

[Actual result]:
- Some letters in the bolded text are truncated on the bottom side


[Additional notes]:
- attached screenshot to the issue;
- managed to reproduce on 44.0a1;
- not reproducible on Ubuntu 16.04LTS and MacOS 10.12.6;

Comment 1

[Cristian Fogel [:cfogel]]

Additional info:
- step 5 is not mandatory, to obvserve the issue another method is to  edit the text and add letters like: "y, g, j" for the text marked in the screenshot;
- Affected platform: Win 10x64;
- confirmed on beta builds as well, 61.0b14;
- updated flags.

Comment 2

[Daniel Holbert [:dholbert]]

Thanks for the bug report. If you'd be up for trying to make a reduced testcase, that would probably help here.

(Also: I faintly recall seeing a bug report for something like this at github, too, though I can't find the bug at the moment.)

Comment 3

[Cristian Fogel [:cfogel]]

Attachment: example.zip

Attached a simplified version of the TC.
Yeah, you where right it's not an uncommon issue.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (reporter's reduced testcase)

Thanks for that testcase. Here's an extracted-from-the-zip live all-in-one-file version, viewable directly on Bugzilla.

I don't see the issue here (on Linux), but if I reduce the hardcoded "line-height", I can make something like what you describe happen.

I'm guessing that the issue on the live LinkedIn site (and in the unmodified testcase) is just an unlucky choice of system font, playing poorly with the hardcoded explicit line-height value and the clipping from "overflow-y: hidden".

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Firefox Nightly (top) vs. Chrome (bottom), on Win10

I can reproduce this, though the difference between Firefox & Chrome is extremely subtle.

It looks like we're picking the same font as Chrome, and we're just doing subtly different subpixel positioning, such that the bottom pixel (~half-pixel?) of the descender is clipped via the "overflow-y:hidden" for us, but is not for Chrome.

I can trigger the issue in Chrome by reducing the hardcoded line-height by 1/2 pixel (to line-height: 19.5px), too, FWIW.

So I think this is just a case where a site is making unwarranted assumptions about precise font metrics and precise fractional-pixel positioning, and using "overflow-y:hidden" which sets things up to fail if their assumptions aren't precisely matched. :-/

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Chrome if I reduce line-height by 1/2 pixel

(In reply to Daniel Holbert [:dholbert] from comment #5)
> I can trigger the issue in Chrome by reducing the hardcoded line-height by
> 1/2 pixel (to line-height: 19.5px), too, FWIW.

Here's a screenshot to demonstrate this.  Chrome in this screenshot looks basically like Firefox in the previous screenshot.