internet explorer - IE 10 + 11: CSS transitions with calc() do not work -

i animating container on mouseover right left css transitions. works fine in browsers except internet explorer. reason using (and need use) calc() in css left property.

i created live demo here: live demo

the css looks 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 adding class .translate-less on mouseover jquery:

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

now have smooth transition in internet explorer. that, ditch calc() these specific browsers , add rule left: 85%;. ie 10 , 11 have dropped support conditional comments , there seems no way target these browsers specifically. ie 10 can targeted -ms-high-contrast-hack, ie 11 cannot. not want use javascript detect browser because seems hackier using css hacks.

any help? in advance!

maybe transform: translatex() can provide work-around. depending on circumstances, using transforms , right property might better:

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

here modified version of script: http://jsfiddle.net/xv84z/1/.

alternatively, while can't use calc() within translatex() in ie (because of a bug), can apply multiple translatex()s in transform:

/* */ transform: translatex(90%) translatex(-4rem); /* equivalent */ transform: translatex(calc(90% - 4rem)); 

(however, 90% in case means 90% of target, not parent.)