1644178 - Cut off font on Facebook in Firefox on Ubuntu 20.04

Status: RESOLVED WORKSFORME

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

Description

[Konrad Kołodziejczyk]

Attachment: Zrzut-ekranu-z-2020-06-06-00-07-36.png

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0

Steps to reproduce:

I've opening Facebook site in Firefox on Ubuntu 20.04, Ubuntu MATE 20.04 and Xubuntu 20.04.

Actual results:

The domain of site is cutted off on Facebook site as it is seen on attached screenshot.
https://i.postimg.cc/44Bt3H7j/Zrzut-ekranu-z-2020-06-06-00-07-36.png
I've seen this problem in Ubuntu 20.04, Ubuntu Mate 20.04, Xubuntu 20.04 and I haven't seen in Ubuntu 19.10 and Windows 10. This issue is merely in Firefox. Facebook site in Google Chrome looks ok.

I've reported this issue also on launchpad.
https://bugs.launchpad.net/bugs/1882309

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Jonathan Kew [:jfkthame]]

It looks like the site there is styled with font-size:12px and line-height:11px (and overflow:hidden); the exact results will depend on the font that's used, its baseline alignment within the available line height, etc., but having line-height smaller than font-size seems like it's asking for trouble.

Having said that, I'm not seeing this on my Ubuntu 18.04 system, with any of several possible sans-serif fonts. What font is Ubuntu 20.04 using here?

Comment 3

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Set S4 as this is a cosmetic issue related to site design and the font used.

Comment 4

[Konrad Kołodziejczyk]

(In reply to Jonathan Kew (:jfkthame) from comment #2)

It looks like the site there is styled with font-size:12px and line-height:11px (and overflow:hidden); the exact results will depend on the font that's used, its baseline alignment within the available line height, etc., but having line-height smaller than font-size seems like it's asking for trouble.

Having said that, I'm not seeing this on my Ubuntu 18.04 system, with any of several possible sans-serif fonts. What font is Ubuntu 20.04 using here?

How to check it?

Comment 5

[Jonathan Kew [:jfkthame]]

You can find out what font is used for a particular element using the Inspector. Right-click on the element in question and choose Inspect Element from the menu, then in the Inspector look at the Fonts panel on the right-hand side (it's one of the options for the section that offers Layout / Computed / Changes / etc.) Note that you may have to use the popup menu at the far right to switch to the Fonts panel, if the window isn't wide enough for it to show its heading by default. This should show the font (or fonts) used for the element.

Comment 6

[Wayne Mery (:wsmwk)]

(In reply to Jonathan Kew (:jfkthame) from comment #2)

It looks like the site there is styled with font-size:12px and line-height:11px (and overflow:hidden); the exact results will depend on the font that's used, its baseline alignment within the available line height, etc., but having line-height smaller than font-size seems like it's asking for trouble.

Having said that, I'm not seeing this on my Ubuntu 18.04 system, with any of several possible sans-serif fonts. What font is Ubuntu 20.04 using here?

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

Redirect a needinfo that is pending on an inactive user to the triage owner.
:jfkthame, since the bug has recent activity, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 8

[Konrad Kołodziejczyk]

I don't see this problem in the Ubuntu 20.04 and Ubuntu 22.04.

Comment 9

[Konrad Kołodziejczyk]

Furthermore, Facebook have new interface since then.

Comment 10

[Jonathan Kew [:jfkthame]]

It looks like this may have been an issue with the Facebook CSS vs some particular font that didn't fit well in the allocated space, but the reporter is no longer seeing the issue -- closing as WFM.