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

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

Related