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