Неможливо використовувати 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, але останній набагато плавніший при використанні з переходами, оскільки, наскільки я розумію, він змушує використовувати графічний процесор для обробки анімації.

Заздалегідь дякую за вашу пораду та розуміння!

Це:

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

отримує компіляцію під час аналізу, але вираз calc тут:

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

має інтерпретуватися кожного разу, коли браузер потребує цього значення. Результат виразу можна кешувати, але я б не покладався на браузери для використання такого роду оптимізацій.

Отже, перший краще в тому сенсі, що а) він працює зараз, б) дієвий і в) він буде працювати в майбутньому, поки специфікація не буде діяти.

Я просто використовую їх обох за допомогою селектора браузера -ms-. Це чудово працює.

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