Open Bug 1470136 Opened 4 years ago Updated 4 years ago

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

Categories

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

All
Windows
defect

Tracking

()

Tracking Status
firefox-esr52 --- affected
firefox-esr60 --- affected
firefox60 --- affected
firefox61 --- affected
firefox62 --- affected

People

(Reporter: cfogel, Unassigned)

Details

Attachments

(4 files, 1 obsolete file)

[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;
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.
Summary: [WIN] Text truncated on linkedin → [WIN] Text truncated on linkedin - profile strength section
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.)
Priority: -- → P3
Summary: [WIN] Text truncated on linkedin - profile strength section → [WIN] Text descenders are clipped/covered on linkedin's "profile strength" section
Attached file example.zip (obsolete) —
Attached a simplified version of the TC.
Yeah, you where right it's not an uncommon issue.
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".
Attachment #8987098 - Attachment is obsolete: true
Summary: [WIN] Text descenders are clipped/covered on linkedin's "profile strength" section → [WIN] Text descenders are clipped/covered on linkedin's "profile strength" section (with hardcoded line-height and "overflow-y:hidden")
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. :-/
(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.
Priority: P3 → P5
You need to log in before you can comment on or make changes to this bug.