IE 10 + 11: переходы CSS с помощью calc() не работают

Я анимация контейнера на mouseover справа налево с переходами CSS. Это отлично работает во всех браузерах, кроме Internet Explorer. Причина в том, что я использую (и должен использовать) calc() в свойстве CSS left.

Я создал демо-версию здесь: Live Demo

CSS выглядит так:

div {
    background: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 90%;
    -webkit-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
div.translate-less {
    left: calc(90% - 4rem)
}

Я добавляю класс .translate-less на mouseover с помощью jQuery:

$(document)
.on( 'mouseenter', 'div', function(){
    $(this).addClass('translate-less')
})
.on( 'mouseleave', 'div', function(){
    $('div').removeClass('translate-less');
})

Теперь я хотел бы иметь плавный переход в Internet Explorer. Для этого я бы даже выбрал calc() для этих конкретных браузеров и добавил правило вроде left: 85%;. Но IE 10 и 11 отказались от поддержки условных комментариев, и, похоже, нет возможности специально настроить таргетинг на эти браузеры. IE 10 может быть нацелен на -ms-high-contrast-hack, но IE 11 не может. Я не хочу использовать JavaScript для обнаружения браузера, потому что это кажется даже хакерским, чем использование хаков CSS.

Любая помощь? Спасибо заранее!

Ответы

Ответ 1

Возможно, transform: translateX() может обеспечить обход. В зависимости от обстоятельств использование преобразований и правильного свойства может быть лучше:

right: 10%;
transform: translateX(-4rem);

Ниже приведена измененная версия вашего script: http://jsfiddle.net/xV84Z/1/.

В качестве альтернативы, хотя вы не можете использовать calc() внутри translateX() в IE (из-за ошибка), вы можете применить несколько translateX() в преобразование:

/* This */
transform: translateX(90%) translateX(-4rem);
/* is equivalent to this */
transform: translateX(calc(90% - 4rem));

(Однако 90% в этом случае означает 90% цели, а не родителя.)