CSS Calc Function Bug in Ie

CSS hsl calc bug in IE11

IE does not support calc() on color functions. Example: color: hsl(calc(60 * 2), 100%, 50%).

source: https://caniuse.com/#feat=calc

You'll need to scrape your requirement for calc() in this context

CSS calc() not working correctly with em in IE

IE miscalculates 0.375em when em equals 16px. Instead of the mathematically correct result 6px, it gets 5.92px. This can be seen by setting the width of an element to 0.375em and inspecting the element in developer tools. There you can see that IE also shows the declared with as 0.37em, so it seems to drop any digits after 0.37! This happens also when using simply width: 0.375em, without using calc() at all.

In this case, the bug makes the width of each box a fraction of a pixel larger than it should be, and thus the second box does not fit on the right of the first a box.

A simple solution is to use integers. Mathematically, 0.375 equals 3/8, so you would replace

width: calc(50% - 0.375em)

by

width: calc(50% - 3em/8)

flex doesn't support calc in IE11

It's a known bug.

IE 10-11 ignore calc() functions used in flex shorthand declarations.

Since this bug only affects the flex shorthand declaration in IE 11, an easy workaround (if you only need to support IE 11) is to always specify each flexibility property individually.

source: https://github.com/philipwalton/flexbugs#flexbug-8

So, in other words, instead of:

flex: 1 0 calc(100% / 3)

Try:

flex-grow: 1;
flex-shrink: 0;
flex-basis: calc(100% / 3);

---

Also, consider this: You don't even need the calc() function.

If you want three equal width columns, this will do:

flex: 1

or

flex: 1 0 30%

or even:

flex: 1 0 26%;

With flex-grow: 1 defined in the flex shorthand, there's no need for flex-basis to be 33.33%.

Since flex-grow will consume free space on the line, flex-basis only needs to be large enough to enforce a wrap (should it become necessary).

In this case, with flex-basis: 26%, there's plenty of space for the margins, borders, padding, etc., but never enough space for a fourth item.

calc() not working with transform in Internet Explorer/Microsoft Edge

No. Since you're not even performing arithmetic with dynamic values here, just do yourself a favor and hardcode the ratio to three decimal places. Three decimal places is all the precision you need, even when taking high-resolution device displays into account.

---

Related Topics