Tudo,

Gostaria de poder usar calc () com transform: translateX no meu CSS.

Por exemplo.,

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

Embora isso funcione perfeitamente no Chrome, Safari e Firefox - não funciona no IE10 ou IE11.

Você pode ver um exemplo simples aqui:http://jsfiddle.net/SL2mk/9/

Isso é impossível? É um bug no IE ou écalc() não deveria trabalhar neste contexto?

Por que vale a pena - eu liaqui que você pode "empilhar"translateX para obter o mesmo efeito, e meus testes parecem confirmar isso. Ou seja,

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

é o mesmo que:

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

Mas não sei se essa é a melhor, mais confiável e preparada para o futuro.

Eu também sei que é possível usarleft ao invés detranslateX, mas o último é muito mais suave quando usado com transições, pois, pelo que entendi, força o uso da GPU para manipular a animação.

Agradecemos antecipadamente por seus conselhos e informações!