Internet Explorer + calc() + transform = 🖕🏻
Es ist ja nun wirklich kein Geheimnis, dass so ziemlich jeder Entwickler auf den Untergang von Microsofts Internet Explorer in all seinen Formen wartet – sorry Bill! Und auch wenn man denkt man hat jetzt alle Macken mindestens einmal durch, dann überrascht dieser Daten-Müll einen jedes Mal aufs Neue mit anderen Problemen. Heute:
IE10, IE11, and Edge < 14 don’t support using calc() inside a transform
Erste Reaktion: Mittelschwere Panik-Attacke weil ich ungefähr im gesamten Projekt translate3d mit calc gemixt habe und mir heute im Internet Explorer 11 alles um die Ohren geflogen ist.
Zweite Reaktion: Wie kann ich das Ganze bloß beheben? Es stellte sich heraus, dass der IE klarkommt, wenn transform: translate3d(calc(100vh - 100px),50%,0) einfach in eine schön oldschool verkettete transform-Anweisung verwandelt wird.
.one.animate {
transform: translateX(100px) translateX(200px) translateX(-10%) translateY(15%) translateY(100px) rotate(55deg) rotate(-10deg);
}
.two.animate {
transform: translate3d(calc(100px + 200px - 10%),calc(15% + 100px),0) rotate(calc(55deg - 10deg));
}Jetzt bin ich allerdings verwirrt, ob ich Microsoft danken soll, dass ich wieder etwas gelernt habe oder ihnen einen bösen Brief schreiben muss, damit die ENDLICH diesen Browser aus ihrem OS entfernen! 🤷🏻♂️