Not possible to use CSS calc() with transform:translateX in IE

All,

I would like to be able to use calc() with transform:translateX in my CSS.

E.g.,

#myDiv {
  -webkit-transform: translateX(calc(100% - 50px));
  -moz-transform: translateX(calc(100% - 50px));
  transform: translateX(calc(100% - 50px));
}

While this works perfectly in Chrome, Safari, and Firefox - it does not work in IE10 or IE11.

You can see a simple example here: http://jsfiddle.net/SL2mk/9/

Is this impossible? Is it a bug in IE, or is calc() not supposed to work in this context?

For what it's worth - I read here that you can "stack" translateX to acheive the same effect, and my testing seems to confirm this. I.e.,

#div {
  transform: translateX(calc(100% - 50px));
}

is the same as:

#div {
  transform: translateX(100%) translateX(-50px);
}

But I don't know if this is the best, most reliable, and future-proof way to do this.

I also know that it's possible to use left instead of translateX, but the latter is much smoother when used with transitions, since, as I understand it, it forces the use of the GPU to handle the animation.

Thanks in advance for your advice and insight!

Solution 1:

This:

transform: translateX(100%) translateX(-50px);

gets compiled at parse time, but calc expression here :

transform: translateX(calc(100% - 50px));

has to be interpreted each time when browser needs that value. Result of the expression can be cached but I wouldn't rely on browsers to use such kind of optimizations.

So first one is better in the sense that a) it works now, b) is effective and c) it will work in future until the spec will be in effect.

Solution 2:

I just use them both with -ms- browser selector. It works perfectly.

-ms-transform: translateX(100%) translateX(-50px); /* IE 11 */
transform: translateX(calc(100% - 50px));