Estoy animando un contenedor en mouseover de derecha a izquierda con transiciones CSS. Esto funciona bien en todos los navegadores excepto en Internet Explorer. La razón es que estoy usando (y necesito usar) calc () en mi CSS propiedad de la izquierda.

He creado una demostración en vivo aquí:Demo en vivo

El CSS se ve así:

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

Estoy agregando la clase .translate-less en mouseover con jQuery:

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

Ahora me gustaría tener una transición sin problemas en Internet Explorer. Para eso, incluso descartaría el calc () para estos navegadores específicos y agregaría una regla comoleft: 85%;. Pero IE 10 y 11 tienensoporte caído para comentarios condicionales y parece que no hay manera de apuntar a estos navegadores específicamente. IE 10 puede ser apuntado con el-ms-alto-contraste-hack, pero IE 11 no puede. No quierousar JavaScript para detectar el navegador porque esto parece aún más intrépido que usar hacks CSS.