1659213 - "N mutual friends" is clipped on the Facebook "People You May Know" widget

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: screenshot

Note: this bug specifically affects the "People You May Know" widget in the main Facebook feed -- not the full-page UI at https://www.facebook.com/friends/ .

Unfortunately, there seems to be no way to get the "People You May Know" widget to show up on-demand -- it just sometimes appears in my feed, between updates from friends (and it shows this issue).

Fortunately, I saw it in both Firefox and Chrome today, and I confirmed that it has this problem in Firefox & not in Chrome, and I've captured a reduced testcase (which I'll sanitize & then attach)

STR:

1. Log in to Facebook and visit https://www.facebook.com/
2. Wait for Facebook to show you a "People You May Know" widget in your main feed.
3. Scroll through it, looking at the "N mutual friends" badges on each suggestion.

ACTUAL RESULTS:
For some of the suggestions, the top of the "N mutual friends" line is clipped.

EXPECTED RESULTS:
No such clipping.

(I'm using yesterday's nightly on Linux, though I've noticed this issue off-and-on for a while, so I think it's a longstanding issue)

Comment 1

[Daniel Holbert [:dholbert]]

Ah... aha. I think this is just a Facebook bug, where they're being overly presumptive about fonts available on the user's system.

The element in question uses font-family: Helvetica, Arial, sans-serif;. Firefox's DevTools show me that I end up with a choice of Nimbus Sans for this element (presumably the closest that we find to Helvetica on Ubuntu), whereas Chrome gives me something else.

If I adjust my reduced testcase such that it explicitly uses Nimbus Sans, then Chrome gives the same broken rendering.

So, calling this "INVALID" from a Firefox-bug perspective.

Comment 2

[Daniel Holbert [:dholbert]]

Yeah, the offending style here is the following:

.muag1w35 {
    margin-top: -4px;
}

This is applied at the innermost level here (the span that wraps the text), and it is responsible for shifting the text upwards such that the top gets clipped.

Apparently the font that Chrome ends up choosing (perhaps legit-Helvetica, if they bundle that with the application?) has enough top-padding for this negative margin to be barely-fine. But in Nimbus Sans (the font that we end up with in Firefox on Ubuntu), clipping 4px off the top (inside of an overflow-y:hidden area) ends up clipping off the top of the text.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: screenshot of testcase 1 in Firefox (top) vs Chrome (bottom)

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: screenshot of testcase 1 in Firefox (top) vs Chrome (bottom) **after forcing "Nimbus Sans" as the font**

As you can see here, Chrome shows the same rendering issue (in fact, a bit worse) if I adjust the rule

   body {
     font-family: Helvetica, Arial, sans-serif;

...to instead:

   body {
     font-family: "Nimbus Sans";

...to force both browsers to use the font that Firefox ends up using when trying to do font-matching for the first rule.

Comment 6

[Arno Renevier]

Thanks for the report.

We are tracking it and have opened an internal bug at facebook.

Comment 7

[Daniel Holbert [:dholbert]]

Thanks, Arno!