Я анимация контейнера на 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.
Любая помощь? Спасибо заранее!