Menu
I've got a problem when using em units in Chrome (Version 31.0.1650.63 m).
Following JSFiddle produces incorrect output in Chrome (in comparison to Firefox or IE the green box is too big):
http://jsfiddle.net/rapik/j72aZ/
HTML:
<div class="aaa">
<div class="bbb">
</div>
</div>
CSS:
.aaa {
font-size: 0.5rem;
width: 30em;
height: 30em;
background: red;
}
.bbb {
font-size: 0.1em;
width: 15em;
height: 15em;
background: green;
}
The problem seem to be the rule font-size: 0.1em which does not make the em 10 times smaller. Instead it sets em to some minimum value. There will be no difference between font-size: 0.1em and font-size: 0.2em because both are smaller than this magic minimum value....
Is this a bug or am I doing something wrong?
This particular case can be solved by multiplying all values of the "bbb" class with 10. But in my case the thing is more complicated and I need this font-size: 0.1em.
I am using em units to build scalable controls. My controls have root div and multiple child elements. The idea is that all values are set using em and the run-time size of the em is controlled by the font-size of the root element. If an element has font-size defined, then it's em will depend on it.
I would appreciate any ideas or suggestions!
Update:
Here are screenshots of different outputs I am speaking about:
243
This is caused by the fact that the minimum font-size setting is floored at 6px (in Chrome 30+) - you can't choose a lower value. This isn't problematic when you set the font-size of .aaa, as its computed value is 8px. But using font-size: 0.1em; on .bbb results in a computed value of 0.8px - and since it's less than the minium, the actual used value is 6px:
http://linenwoods.com/images/dev.png
This bug report, though slightly unrelated, suggested changing the minimum font-size setting to something larger, pressing done, and then changing it back to 6px (though it didn't seem to work for your example.) It also mentioned that prior to Chrome 27, you were once able to get around this with -webkit-text-size-adjust: none; (though it's been deprecated as of version 27.) This, somewhat recent question, seeks a similar solution but has yet to been answered.
151
As 412 has explained, this is due to the Chrome minimum font size of 6px, though I'll add that this font size only kicks in when the font sizes are specified using em or rem. Either you can accept this limitation, or you can sidestep it.
Say you are targeting a root font size of 1px when 1 em = 16px (i.e. most browsers), you might think to use rules like:
html { font-size: 0.0625em }
.myElem { height: 20em; font-size: 12em; }
as I have previously done (logic being that your container height needs to scale depending on font size). On Chrome, it seems that here font-size will equate as 12 * 1px = 12px as expected, however height will calculate as 20 * 6px = 300px, using the minimum font size of 6px, which is of course undesirable.
Instead, you can use the following approach:
html { font-size: calc(1em / 16); }
.myElem { height: 20em; font-size: 12em; }
Your root element (<html>) font size still calculates to 1px when 1 em = 16px, however as it's in px instead of em/rem, the minimum font size rule of 6px doesn't come into play, and height will equal 20px as desired.
Warning
I've recently discovered that this doesn't work with some non-English languages, like Bulgarian or Cantonese. Personally I've dropped interest in using em after learning that major websites like Facebook etc don't use them, instead users who want bigger text can just use a zoom setting either at the browser or OS level.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
