Невозможно использовать CSS calc() с преобразованием: 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);
}

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

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

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

Ответ 1