The curious case of calc(25% - 1px) that equals 24%

Question

I've recently run into this very interesting bug(?) where my css includes:

width: calc(25% - 1px);

And the computed css shows:

width: calc(24%);

This was the case in

Firefox(Version 44.0.2),

Chrome (Version 49.0.2623.112 m),

and IE11 (Version 11.0.9600.18205)

Does anybody have any idea why this might be happening?

EDIT: same thing happens with calc(25% - 1em) and calc(25% - 1rem)

EDIT 2: here's an example https://codepen.io/martindoychinov/pen/wGYxOO

EDIT 3: apparently it is because im using LESS

two questions here ? what is the size of the original container and what happens when you use em or rem instead of px — Dhaval Chheda, Apr 29 '16 at 10:07
I just added my example and the exact same problem occurs! Your example shows correctly though, where am I going wrong? **EDIT:** just updated, apparently its because im using LESS — Martin Doychinov, Apr 29 '16 at 10:20

score 4 · Accepted Answer · edited May 23 '17 at 12:09

4

You're using LESS as your CSS pre-processor in your example.

You need to escape the expression

width: calc(~'25% - 1px');

edited May 23 '17 at 12:09

Community

answered Apr 29 '16 at 10:23

I.G. Pascual

1 Answers1