CSS transitions with calc() do not work in IE10+

Question

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.

I created a live demo here: Live Demo

The CSS looks like this:

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)
}

I am adding the class .translate-less on mouseover with jQuery:

$(document)
.on( 'mouseenter', 'div', function(){
    $(this).addClass('translate-less')
})
.on( 'mouseleave', 'div', function(){
    $('div').removeClass('translate-less');
})

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 left: 85%;. But IE 10 and 11 have dropped support for conditional comments and there seems to be no way to target these browsers specifically. IE 10 can be targeted with the -ms-high-contrast-hack, but IE 11 cannot. I do not want to use JavaScript to detect the browser because this seems even hackier than using CSS hacks.

Answer 1

Maybe transform: translateX() can provide a work-around. Depending on the circumstances, using transforms and the right property might be better:

right: 10%;
transform: translateX(-4rem); 

Here is a modified version of your script: http://jsfiddle.net/xV84Z/1/.

Alternatively, while you can't use calc() within a translateX() in IE (because of a bug), you can apply multiple translateX()s in a transform:

/* This */
transform: translateX(90%) translateX(-4rem);
/* is equivalent to this */
transform: translateX(calc(90% - 4rem));

(However, 90% in this case means 90% of the target, not the parent.)