Steps to reproduce
Apply a font-size, or width, or height, in em, where there are more than 2 decimals.
Here is an example : http://codepen.io/mh-nichts/pen/xhIEn
The text should have a font-size of 10px (.625em) but it’s 9.93px (.62em).
The value souldn’t be rounded or truncated, or at least there should be some spec about how many decimals we are allowed to use.
Dev Channel specific:
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Christian F.”
Changed Assigned To from “Christian F.” to “Bogdan B.”
Changed Assigned To from “Bogdan B.” to “IE F.”
Changed Status to “Confirmed”
MS Edge seems to truncate all values to 2 decimal places which makes the use of rem, ems or % unusable:
Width is set to 23.625rem which = 378px (378/16)
Edge (and probably older IE) show the width set as:
Which results in a flex container wrapping an image gallery to early as 2 images of a width of 189px = 378 but on edge it only thinks 377.92px are available resulting in an image wrapping. FF & Chrome do not have this issue.
As seen here:
Come on Microsoft. What are you waiting for? 3 years later and this has not yet been fixed?
This is very serious & important bug. It breaks completely the page layouts.
Still an issue for me too. What’s interesting is some CSS properties support greater precision i.e. border, margin - there is no truncation of EM/REM values to 2 decimal places.
This issue also affects CSS
letter-spacing. An example from a current project is a value of
-0.025em, which other browsers correctly compute as
-1px. Edge and Chrome truncate this to
-0.02em, resulting in computed value of
It would be nice if this bug was fixed before its fourth birthday.