What is overriding the CSS rule?

Question

Here is another unexpected outcome of a CSS rule. (Yesterday I posted this that was not understood here: How to I avoid that the CSS rule * {} trump .a .b {}?)

For historical reasons I have these CSS rules:

:root {
    --baseFontSize: 16px;
}
html {
    font-size: var(--baseFontSize);
}

The last rule shows up in Chrome on a P element. The computed value of --baseFontSize on that element is " 16px". The "Computed Style" shows that the last rule used is the rule above.

But. The value is "20.8px".

What is going on?

@TemaniAfif No, you do not see them. This is a bit more technical question. — Leo, Dec 16 '19 at 10:39
and everyone is talking about specifity in your other question where it's not involved there. Only one selector is selecting your i element which is `*` so it applies logically. — Temani Afif, Dec 16 '19 at 10:40
@TemaniAfif Yes, I know, but it is very easy to miss that. (And solving the problem is not very hard either, but no one came up with an answer.) — Leo, Dec 16 '19 at 10:42
*No, you do not see them.* If we cannot see/reproduce the result we cannot help you. You are the only one seeing the 20.8px value. — Temani Afif, Dec 16 '19 at 10:42
@TemaniAfif Perhaps. But it depends on what kind of knowledge you have. — Leo, Dec 16 '19 at 10:42
What @TemaniAfif means is that you need to provide us with a [mcve]. Otherwise we can't do anything here. — Mr Lister, Dec 16 '19 at 10:42
@MrLister Yes, I know, but it is not that kind of problem. (It is probably a bug.) — Leo, Dec 16 '19 at 10:43
@Leo I disagree. A bug that would produce such a glaring error would be caught instantly and would not appear in release. Or, are you using Chrome Canary? — Mr Lister, Dec 16 '19 at 10:52
@MrLister Then I guess you have not filed very many bug reports. — Leo, Dec 16 '19 at 11:04
@MrLister No, I do not use Canary. (Then I would not have been asking here.) — Leo, Dec 16 '19 at 11:13

score 1 · Answer 1 · answered Dec 16 '19 at 12:08

1

If we create a html document with your variables it can be seen that the value is indeed 16px as expected. So there are no 20.8px anywhere.

Maybe you zoomed in on browser? Set a different font-size on your OS?

:root {
    --baseFontSize: 16px;
}
html {
    font-size: var(--baseFontSize);
}

<p> Here be text </p>

answered Dec 16 '19 at 12:08

cloned

6,346
4
26
38

1

That won't produce the result in the OP's question. Even zoomed in, the computed style of the p will still be 16px. – Mr Lister Dec 16 '19 at 12:28
I think zooming in is a good guess. I even had to check earlier today. Zoom is 100%. But on an older mobile I used to have zoom on maybe 130% (which would give 20.8...) However I do not see this "zoom" on all elements. – Leo Dec 16 '19 at 17:24

What is overriding the CSS rule?

1 Answers1