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

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.

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