Невозможно использовать CSS calc () с transform: translateX в IE

Все,

Я хотел бы иметь возможность использовать calc () с transform: translateX в моем CSS.

Например.,

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

Хотя это прекрасно работает в Chrome, Safari и Firefox - оно не работает в IE10 или IE11.

Вы можете увидеть простой пример здесь:http://jsfiddle.net/SL2mk/9/

Это невозможно? Это ошибка в IE, илиcalc() не должен работать в этом контексте?

Для чего это стоит - читаюВот что вы можете "сложить"translateX чтобы добиться того же эффекта, и мое тестирование, кажется, подтверждает это. т.е.,

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

такой же как:

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

Но я не знаю, является ли это лучшим, самым надежным и перспективным способом сделать это.

Я также знаю, что можно использоватьleft вместоtranslateX, но последний гораздо более плавный при использовании с переходами, поскольку, насколько я понимаю, он заставляет использовать графический процессор для обработки анимации.

Заранее спасибо за ваш совет и понимание!

Ответы на вопрос(2)

Ваш ответ на вопрос