1249038 - In Facebook Event "[Invite|...]" button, the "..." part is a bit too tall (unless we spoof a Chrome user agent string)

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: screenshot of bug in Firefox

STR:
 1. View a Facebook Event page (where you have privileges to invite people)
 2. Look at the "Invite|..." button towards the upper-right.

ACTUAL RESULTS:
The "..." part is a bit taller than the "Invite" part. See attached screenshot.

EXPECTED RESULTS:
The two parts should be the same height.

Firefox Nightly (47) and release (44) give ACTUAL RESULTS. So does Firefox 31 (a random old build that I tried). So, not a Firefox regression, or not a recent one at least.

Chrome 50 dev gives EXPECTED RESULTS.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of expected rendering, taken in Chrome

Comment 2

[Daniel Holbert [:dholbert]]

Actually, this seems to be a Facebook bug, in their Firefox-specific CSS.

In particular:
 - If I save an affected Facebook page in Firefox & load it in Chrome, then I get ACTUAL RESULTS. (i.e. Chrome agrees with us on the brokenness)

 - If I use Firefox Nightly with a spoofed Chrome user agent string, then I get EXPECTED RESULTS. (i.e. we render the buttons nicely, if Facebook sends us their Chrome-specific code instead of their Firefox-specific code)

Comment 3

[Daniel Holbert [:dholbert]]

(If it matters, my OS is Ubuntu 15.10, 64-bit.)

Comment 4

[Hallvord R. M. Steen [:hallvors]]

Markup structure in Firefox:

div 
 a - "invite"
 div
  a - "..."

Both As and DIVs have display:inline-block, the As also have a line-height: 26px applied. If I remove either the display:inline-block or the line-height from the A elements, the extra height (1px or so) goes away.

Comment 5

[Mike Taylor [:miketaylr]]

Sorry for letting this slip through the cracks - setting to [contactready]. I don't think we need much more of an explanation -- serving the same CSS that Chrome receives would fix it. If they would prefer to fix the Firefox CSS, see Comment #4.

Comment 6

[Daniel Holbert [:dholbert]]

Hmm, actually I can't reproduce this anymore! (using current Firefox Nightly 51 on Ubuntu 16.04, if it matters)  I'm seeing results like attachment 8720351 [details] -- expected/nice results.

Perhaps Facebook fixed whatever quirk they had in their Firefox-specific CSS that was causing this? Since we don't know when/why/how this was fixed, I guess WORKSFORME is appropriate. (Feel free to reopen if anyone else is still hitting this.)

Comment 7

[Mike Taylor [:miketaylr]]

Thanks for checking Daniel!