--RS__baseLineHeight doesn’t play nicely with zoom on Safari and Firefox

[JayPanoz]

Unfortunately, the following is creating an issue in Safari + Firefox:

--RS__baseLineHeight: calc((1em + (2ex - 1ch) - ((1rem - 16px) * .1667)) * var(--RS__lineHeightCompensation));

This is fine in Chrome, the result is what you would expect.

As soon as the custom property is disabled or its value is modified to a simpler one e.g. 1.2, Safari and Firefox behave normally.

zoom 1 for reference:

Zoom 0.7, the line-height is larger than it should be:

Zoom 1.7, the issue is becoming obvious as the line-height is smaller than it should be:

Investigating.

[JayPanoz]

OK so the issue is pretty straightforward in the sense Chrome is not recalculating the line-height on zoom while Safari and Firefox are.

For a11y purposes, MDN also notes a minimum of 1.5 should be considered.

The idea of the calc in the first place was to slightly decrease line-height with larger font-sizes but now that everything is decoupled from the font-size normalisation, it has this unfortunate side-effect and should be updated w/o trying to be too smart.