Alle,

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 - es funktioniert jedoch nicht in IE10 oder IE11.

Hier sehen Sie ein einfaches Beispiel:http://jsfiddle.net/SL2mk/9/

Ist das unmöglich? Ist es ein Fehler im Internet Explorer oder ist es ein Fehler im Internet Explorer?calc() soll in diesem zusammenhang nicht funktionieren?

Für das, was es wert ist - ich leseHier dass man "stapeln" kanntranslateX den gleichen Effekt zu erzielen, und meine Tests scheinen dies zu bestätigen. Das heißt,

#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.

Ich weiß auch, dass es möglich ist, zu verwendenleft Anstatt vontranslateXLetzteres ist jedoch viel flüssiger, wenn es mit Übergängen verwendet wird, da es meines Wissens die Verwendung der GPU zur Bewältigung der Animation erzwingt.

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