CSS calc () kann mit transform: translateX im IE nicht verwendet werden

Alles,

Ich möchte calc () mit transform: translateX in meinem CSS verwenden können.

Z.B,

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

Dies funktioniert zwar perfekt in Chrome, Safari und Firefox, aber nicht in IE10 oder IE11.

Ein einfaches Beispiel finden Sie hier: http://jsfiddle.net/SL2mk/9/

Ist das unmöglich Ist es ein Fehler im IE oder calc()soll es in diesem Zusammenhang nicht funktionieren?

Für das, was es wert ist - ich habe hier gelesen , dass Sie "stapeln" können translateX, um den gleichen Effekt zu erzielen, und meine Tests scheinen dies zu bestätigen. Dh

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

ist das gleiche wie:

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

Aber ich weiß nicht, ob dies der beste, zuverlässigste und zukunftssicherste Weg ist, dies zu tun.

Ich weiß auch, dass es möglich ist, leftanstelle von zu verwenden translateX, aber letzteres ist viel flüssiger, wenn es mit Übergängen verwendet wird, da es nach meinem Verständnis die Verwendung der GPU erzwingt, um die Animation zu verarbeiten.

Vielen Dank im Voraus für Ihren Rat und Ihre Einsicht!

Dies:

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

wird zur Analysezeit kompiliert, aber Ausdruck hier berechnen:

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

muss jedes Mal interpretiert werden, wenn der Browser diesen Wert benötigt. Das Ergebnis des Ausdrucks kann zwischengespeichert werden, aber ich würde mich nicht auf Browser verlassen, um solche Optimierungen zu verwenden.

Das erste ist also besser in dem Sinne, dass a) es jetzt funktioniert, b) effektiv ist und c) es in Zukunft funktioniert, bis die Spezifikation in Kraft tritt.

Ich benutze sie beide einfach mit -ms- Browser Selector. Es funktioniert perfekt.

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