Невозможно использовать CSS calc () с преобразованием: translateX в IE

Все,

Я хотел бы иметь возможность использовать # myDiv { -webkit-transform : translateX ( calc ( 100% - 50px )); -moz-transform : translateX ( calc ( 100% - 50px )); transform : translateX ( calc ( 100% - 50px )); } с преобразованием: calc () в моем CSS.

Например,

translateX

Хотя это отлично работает в Chrome, Safari и Firefox - он не работает в IE10 или IE11.

Вы можете увидеть простой пример: http://jsfiddle.net/SL2mk/9/

Это невозможно? Это ошибка в IE, или она calc()не должна работать в этом контексте?

Для чего это стоит - я читал здесь, что вы можете «складывать», чтобы добиться такого же эффекта, и мое тестирование, похоже, подтверждает это. То есть,#div { transform: translateX(calc(100% - 50px)); }

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

такой же как:

left

Но я не знаю, является ли это лучшим, надежным и надежным способом для этого.

Я также знаю, что его можно использовать translateXвместо него translateX, но последнее гораздо более плавное при использовании с переходами, поскольку, как я понимаю, оно заставляет использовать GPU для обработки анимации.

Заранее благодарю за ваш совет и прозрение!

html,css,css3,

40

Ответов: 2


91 принят

Эта:

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

скомпилируется во время разбора, но вычисляет выражение здесь:

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

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

Итак, сначала лучше в том смысле, что а) он работает сейчас, б) эффективен и в) он будет работать в будущем до тех пор, пока спецификация не будет действовать.


0

Я просто использую их как с -ms-браузером. Он работает отлично.

-ms-transform: translateX(100%) translateX(-50px); /* IE 11 */
transform: translateX(calc(100% - 50px));
HTML, CSS, CSS3,
Похожие вопросы