CSS: Using rem in :root leads to infinite scaling of texts

craftamap commented 3 months ago

Minimal reproduction:

<style>
:root {
    font-size: 1.2rem;
}

</style>
WHF :^)

Whenever you interact with the page (hover, etc) the font gets a little bit bigger.

I know that you shouldn't use rem units on the root itself, and from looking at the spec this seems to be unspecified?

flashymittens commented 3 months ago

I don’t think “shouldn't” is the right word here, considering, for example,

html { font-size: max(1rem, 20px); }

seems to be working in current browsers just fine, you get either default or 20px, whichever is larger.

CSS Values and Units says:

Equal to the computed value of the em unit on the root element. … When used in the value of any font-* property on the element they refer to, the font-relative lengths resolve against the computed metrics of the parent element—or against the computed metrics corresponding to the initial values of the font and line-height properties, if the element has no parent.

I guess, at root rem is based on a default font size?

utf-4096 commented 3 months ago

LadybirdBrowser / ladybird

CSS: Using rem in :root leads to infinite scaling of texts #339