CSS3 calc(100%-88px) not working in Chrome

Question

I noticed that my usage of the CSS3 calc() function as the unit for width is not working in the latest version of Chrome.

In the Chrome Deve

Answer 1

I struggled with calc property a bit and only below approach worked.

-webkit-calc(~'100% - 40px'); // good: result 395px (in my application)

every above suggestions like:

-webkit-calc(100% - 40px); // bad: result 60%

ended up with wrong calculation like 60%.

Hope it helps somebody.

Answer 2

Use -webkit prefix and spaces around the operator

width: -webkit-calc(100% - 88px);
width: -moz-calc(100% - 88px);
width: calc(100% - 88px);

Answer 3

The problem in the question was caused by the lack of space around the subtraction operator.

Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces.

https://www.w3.org/TR/css3-values/#calc-syntax

^{I speculate that this is to make clear the differentiation between operators and signed numbers.}

Bad: calc(100%-88px)
Good: calc(100% - 88px)

---

How do I know it is not recognizing it? Because of the strikethrough and the yellow triangle icon next to the style rule in chrome dev tools.

A property that is struck in when viewed in Chrome's developer tools may be valid but overridden; however, a property struck through and with a warning triangle icon next to it is invalid.

---

Other Notes

• Chrome has supported calc() for quite some time (confirmed on OSX and Windows).
• Chrome may not support viewport units such as vh/vw inside calc(). As of late 2014, there is activity on implementing this, but the related bug is still open.
• In my testing, Safari will support calc() with the -webkit vendor prefix on OSX but not Windows.
• IE9+ supports calc() with no vendor prefix.
• FF supports calc() with no vendor prefix.