Firefox rendering bug?

[moggers87]

Firefox on Fedora 27:

Compare with Chromium on the same machine:

Text appears to be "floating" higher than it should for bootstrap labels and checkbox/radio labels.

[moggers87]

Doesn't happen with Firefox Android:

[moggers87]

Issue does happen in Epiphany (which I'm fairly sure uses WebKit), so I'm wondering if this is a Fedora problem.

Will see if I can get hold of something not running Fedora to test out Firefox for Desktop on.

[moggers87]

Firefox Windows:

So I guess it's either Fedora specific or Linux specific.

[tsyesika]

It does not seem to be happening on firefox on debian stable for what it's worth. It's also not happening on Safari, Chrome or Firefox on MacOS 10.13.2. Seems to be a Fedora issue.

[moggers87]

Yeah, it's a Fedora font issue: https://bugzilla.redhat.com/show_bug.cgi?id=1535051

While investigating the above bug, I noticed that Bootstrap 4 no longer specifies Helvetica in its font list and so Firefox chooses the default sans serif font "DejaVu Sans" rather than "Nimbus Sans" (which is the free-as-in-freedom replacement for Helvetica). It looks a lot nicer IMO. I also noticed that Chromium will use Ariel/Liberation Sans over Helvetica/Nimbus Sans.

Given these two facts, perhaps we should specify sans-serif on its own (and monospace for plaintext blocks) in our SASS files? This would avoid issues where it appears to be us but isn't in future - if your sans-serif font is bugged then it's going to look broken all over your OS.

[tsyesika]

FWIW. I agree with your suggested solution of switching to using sans-serif and monospace if we have no specific font requirements. That also allows the user to choose the font if they so desire in their operating system. I definitely think this is the way to go.