title: CSS transitions with calc() do not work in IE10+
body: <p>I am animating a container on mouseover from right to the left with CSS transitions. This works fine in all browsers except Internet Explorer. The reason is that I am using (and need to use) calc() in my CSS left property.</p>
  
  <p><strong>I created a live demo here: <a href="http://jsfiddle.net/4MsK8/" rel="noreferrer">Live Demo</a></strong></p>
  
  <p>The CSS looks like this: </p>
  
  <pre><code>div {
      background: red;
      width: 100px;
      height: 100px;
      position: absolute;
      top: 100px;
      left: 90%;
      -webkit-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
      -moz-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
      -o-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
      transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  }
  div.translate-less {
      left: calc(90% - 4rem)
  }
  </code></pre>
  
  <p>I am adding the class .translate-less on mouseover with jQuery:</p>
  
  <pre><code>$(document)
  .on( 'mouseenter', 'div', function(){
      $(this).addClass('translate-less')
  })
  .on( 'mouseleave', 'div', function(){
      $('div').removeClass('translate-less');
  })
  </code></pre>
  
  <p>Now I would like to have a smooth transition in Internet Explorer. For that, I would even ditch the calc() for these specific browsers and add a rule like <code>left: 85%;</code>. But IE 10 and 11 have <a href="http://blogs.msdn.com/b/ie/archive/2011/07/06/html5-parsing-in-ie10.aspx" rel="noreferrer">dropped support for conditional comments</a> and there seems to be no way to target these browsers specifically. IE 10 can be targeted with the <a href="http://www.paulirish.com/2009/browser-specific-css-hacks/" rel="noreferrer">-ms-high-contrast-hack</a>, but IE 11 cannot. I do not want to <a href="http://thebenlumley.com/how-to-target-ie-11-with-css/" rel="noreferrer">use JavaScript</a> to detect the browser because this seems even hackier than using CSS hacks.</p>