Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IE11 font size rendering rem/em calculation bug #2

Open
stein-t opened this issue Sep 8, 2018 · 0 comments
Open

IE11 font size rendering rem/em calculation bug #2

stein-t opened this issue Sep 8, 2018 · 0 comments
Labels
wontfix workaround workaround of an issue

Comments

@stein-t
Copy link
Owner

stein-t commented Sep 8, 2018

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.

@stein-t stein-t added the wontfix label Sep 8, 2018
@stein-t stein-t closed this as completed Sep 8, 2018
@stein-t stein-t reopened this Sep 8, 2018
@stein-t stein-t added the workaround workaround of an issue label Sep 8, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
wontfix workaround workaround of an issue
Projects
None yet
Development

No branches or pull requests

1 participant