You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
CSS Layout systems like Bootstrap set the font-size on the html element to 62.5% which should mean that the font-size is 10px.
This is nice as in my own CSS I can easily calculate rem values for font sizes, widths, margins ect.
However in IE11 the computed font-size when using a value like 3.9rem ends up being a pixel value of 38.74px instead of what is should be 39px
If I set the base html font size to be 10px instead of 62.5% rem calculations work as expected.
Setting the general html font-size to a non-pixel value in IE11 causes the Granit layout to "jump" on resizing panels if there are any panel length sizes defined in em or rem units.
--> If to support Granit in IE11: set the general html font-size to a natural pixel number
--> All other browsers support non-pixel lenght units, but you need to set the general font-size to a value that exactly converts to a natural pixel number (62.5%, 56.25%, 0.125in, 0.625em, etc.).
In general:
font-size pixel values with decimal places or non-pixel font-size values that do not exactly correspond to natural pixel values on the html element cause the Granit layout to "jump" on resizing panels if there are any panel length sizes defined in em or rem units.
The text was updated successfully, but these errors were encountered:
CSS Layout systems like Bootstrap set the font-size on the html element to 62.5% which should mean that the font-size is 10px.
This is nice as in my own CSS I can easily calculate rem values for font sizes, widths, margins ect.
However in IE11 the computed font-size when using a value like 3.9rem ends up being a pixel value of 38.74px instead of what is should be 39px
If I set the base html font size to be 10px instead of 62.5% rem calculations work as expected.
see twbs/bootstrap#13737
Setting the general html font-size to a non-pixel value in IE11 causes the Granit layout to "jump" on resizing panels if there are any panel length sizes defined in em or rem units.
--> If to support Granit in IE11: set the general html font-size to a natural pixel number
--> All other browsers support non-pixel lenght units, but you need to set the general font-size to a value that exactly converts to a natural pixel number (62.5%, 56.25%, 0.125in, 0.625em, etc.).
In general:
font-size pixel values with decimal places or non-pixel font-size values that do not exactly correspond to natural pixel values on the html element cause the Granit layout to "jump" on resizing panels if there are any panel length sizes defined in em or rem units.
The text was updated successfully, but these errors were encountered: