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