Major issues with vertically centered text in Firefox on Linux - Known issue with Nimbus as an alias for Helvetica

ghost commented 2 years ago

What happened?

UPDATE: See discussion in comments. This is due to the Nimbus font that Firefox chooses on Linux as a substitute for Helvetica. More of a significant problem than I thought. Track this issue: https://github.com/primer/css/issues/1209 ... Github itself has the same issue and has not yet settled on a fix.

There are a number of problems with vertically centered text in Firefox. Many components are affected, including buttons and nearly all form controls, chips, toolbars, and more. All of the issues are visible in the Quasar documentation as of this writing.

Below are just a few examples.

Left: Vivaldi (Chromium-based), Right: Firefox 99

What did you expect to happen?

Text should be centered vertically

Reproduction URL

https://jsfiddle.net/ap58tdq3/1/

How to reproduce?

Use Firefox
Go to https://quasar.dev
Look a things

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar), Style & Identity (quasar)

Platforms/Browsers

Firefox

Quasar info output

Operating System - Linux(5.17.1-arch1-1) - linux/x64
NodeJs - 14.19.1

Global packages
  NPM - 6.14.16
  yarn - 1.22.18
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.6.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.4.7 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.13.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.14 -- > This is the repository for Vue Router 4 (for Vue 3)
  pinia - 2.0.13 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  electron - 18.0.1 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.17.8 -- Babel compiler core.
  webpack - 5.71.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.7.4 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

github-actions[bot] commented 2 years ago

Hi @0x199x! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

metalsadman commented 2 years ago

looks fine chrome Version 100.0.4896.88 (Official Build) (x86_64) Screen Shot 2022-04-16 at 12 28 34 PM

Firefox

Screen Shot 2022-04-16 at 12 26 52 PM

Check if you have a rogue extension installed in your FF.

ghost commented 2 years ago

I did actually.. I tested a private browsing window with no extensions enabled.. no change. I just tested on Firefox Android and it looks good. I'm wondering if this could be a Linux font issue.

In my browser dev tools, I modified the body font family .. if I remove -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica and let it fall back to Arial, it fixes the problem. I removed them one by one to see which was the culprit, and only Arial displays properly for me.

Hashen110 commented 2 years ago

Screenshot from 2022-04-16 19-36-35

User agent - Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:99.0) Gecko/20100101 Firefox/99.0

ghost commented 2 years ago

So I'm not the only one.. thanks Hashen. It does indeed seem to be a Firefox+Linux problem.

Digging a little deeper... I wanted to see what system fonts are actually being used. Firefox Linux uses the Nimbus font as a replacement for -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica, and Liberation font for Arial,sans-serif. Vivaldi/Chromium doesn't use Nimbus at all, it renders Liberation no matter what.

So.. the root problem seems to be the use of Nimbus on Firefox Linux

Firefox with DEFAULT font family set (broken):

body {
 background-color:#fff;
 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
 -webkit-font-smoothing:auto
}

Firefox with MODIFIED font family set (working):

body {
 background-color:#fff;
 font-family:Arial,sans-serif;
 -webkit-font-smoothing:auto
}

In VIVALDI/Chromium with DEFAULT font family set (working), it uses Liberation:

ghost commented 2 years ago

One possible fix for Quasar would be to prioritize Liberation Sans over Helvetica (which aliases to Nimbus). This does fix the issue for me.

This would fix the fonts for all Firefox Linux users, and only have a minuscule impact on whatever tiny number of Windows users who have at some point manually installed Liberation Sans on their systems.. in which case it would prefer Liberation Sans (Arial-like) over Helvetica.

body {
    ...
    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,'Liberation Sans',Helvetica,Arial,sans-serif;
    ...
}

Also..

If it's of any relevance.. the Nimbus font aliasing comes from the fontconfig package that ships with nearly all linuxes, so I would suspect that this may be a widespread issue for Linux users. Perhaps Chromium overrides the system aliasing??

Alias similar/metric-compatible families from various sources:

PostScript fonts:       URW fonts:           GUST fonts:        Windows fonts:
======================  ==================  =================  ==================
Helvetica               Nimbus Sans         TeX Gyre Heros
Helvetica Narrow        Nimbus Sans Narrow  TeX Gyre Heros Cn
Times                   Nimbus Roman        TeX Gyre Termes
Courier                 Nimbus Mono PS      TeX Gyre Cursor
ITC Avant Garde Gothic  URW Gothic          TeX Gyre Adventor
ITC Bookman             URW Bookman         TeX Gyre Bonum     Bookman Old Style
ITC Zapf Chancery       Z003                TeX Gyre Chorus
Palatino                P052                TeX Gyre Pagella   Palatino Linotype
New Century Schoolbook  C059                TeX Gyre Schola    Century Schoolbook

Microsoft fonts:  Liberation fonts:       Google CrOS core fonts:  StarOffice fonts:  AMT fonts:
================  ======================  =======================  =================  ==============
Arial             Liberation Sans         Arimo                    Albany             Albany AMT
Arial Narrow      Liberation Sans Narrow
Times New Roman   Liberation Serif        Tinos                    Thorndale          Thorndale AMT
Courier New       Liberation Mono         Cousine                  Cumberland         Cumberland AMT
Cambria                                   Caladea
Calibri                                   Carlito
Symbol                                    SymbolNeu

https://gitlab.freedesktop.org/fontconfig/fontconfig/-/blob/main/conf.d/30-metric-aliases.conf

ghost commented 2 years ago

Submitted a PR but this needs some more consideration/testing. It turns out Nimbus is more of a problematic font than I originally thought.. but that's definitely what the issue is.

Github itself is struggling with the same problem. https://github.com/primer/css/issues/1209

It was staring me right in the face and I never noticed it.

quasarframework / quasar