Font spacing problem in Firefox and Chrome

Table of Contents

1 The problem

A popup dialog is having a scrollbar on Firefox, but doesn't on Chrome.

This is how it looks like on Google Chrome:

| this is a long text |

And this is how it looks like on Firefox:

|  this  is  a  long 	▐ |
                      ^^^--- scroll bar

2 Diagnosis

The problem is reproducible at a 100% rate, even worse on Firefox Windows.

As observed, the font size and container size are the same for both browsers, but there's an issue with the text content.

The word "text" is being pushed to the next line on Firefox, on Chrome, it's not.

Since the font size are the same, the problem might come from the spacing of the words/characters.

3 TODO Action plan

First, we need to examine the spacing, by inspecting the page, try changing the two spacing controller properties: letter-spacing and word-spacing.

Turned out, both of them can solve the problem. So the reason of the different is, we didn't set the initial value for these spacings, and the browser have to determine it themselves.

What next is to determine which one to use.

Date: 2019-01-09 Wed 00:00

Author: Huy Tran

Created: 2019-04-22 Mon 14:41