css/Less calc() method is crashing my IE10

Question

I am trying to get a height in a div to be exactly 55px less then the parent div.

I tried to do this: height: calc(~"100% - 55px"); in less which creates this: height: calc(100% - 55px);

This works fine in Chrome and Firefox, but crashes on IE10.

It's not that it does not work but it crashes it. This is very strange i tried to find some info on line but can't see anything.

Also, this happens only with the height. If i were to use the calc() method on the width it runs fine.

Any idea on how i can get to the bottom of this?

Answer 1

I found the problem. There was a height:inherit inside one of the inside divs. Clearly IE gets super confused on this as the value is calculated and apparently not inheritable. All well now.

So in other words you can't do something like this:

<div style="height:100%">
  <div style="height: calc(100% - 50px)">
    <div style="height:inherit">
    </div>
  </div>
</div>

if you do IE10 will crash, here is an example : http://jsfiddle.net/wyRXp/1/

here i took out the inherit height: http://jsfiddle.net/wyRXp/2/ and it works fine.

Both above samples work fine in Firefox and Chrome

Answer 2

There's a known issue with calc() in IE10

Internet Explorer (in accordance with the spec) does not accept calculations without spaces for additions/subtractions (ie. calc(100%-30px) is invalid, but calc(100% - 30px) works fine).

Refer to CanIUse.com.

Most probable reason of your crash is that the Less is removing spaces when escaping the value.