web-dev-qa-db-fra.com

Les transitions CSS avec calc () ne fonctionnent pas dans IE10 +

J'anime un conteneur en survolant de droite à gauche avec des transitions CSS. Cela fonctionne très bien dans tous les navigateurs sauf Internet Explorer. La raison en est que j'utilise (et que je dois utiliser) calc () dans ma propriété CSS left.

J'ai créé une démo live ici: Live Demo

Le CSS ressemble à ceci:

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)
}

J'ajoute la classe .translate-less au survol avec jQuery:

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

Maintenant, je voudrais avoir une transition en douceur dans Internet Explorer. Pour cela, j'abandonnerais même le calc () pour ces navigateurs spécifiques et ajouterais une règle comme left: 85%;. Mais IE 10 et 11 ont suppression de la prise en charge des commentaires conditionnels et il ne semble y avoir aucun moyen de cibler spécifiquement ces navigateurs. IE 10 peut être ciblé avec le - ms-high-contrast-hack , mais IE 11 ne peut pas. Je ne veux pas tiliser JavaScript pour détecter le navigateur, car cela semble encore plus piraté que d'utiliser des hacks CSS.

cssinternet-explorercss-transitions
47
bootsmaat

transform: translateX() peut peut-être fournir une solution de contournement. Selon les circonstances, l'utilisation de transformations et de la bonne propriété peut être préférable:

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

Voici une version modifiée de votre script: http://jsfiddle.net/xV84Z/1/ .

Alternativement, bien que vous ne puissiez pas utiliser calc() dans une translateX() dans IE (à cause de n bug ), vous peut appliquer plusieurs translateX() s dans une transformation:

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

(Cependant, 90% dans ce cas signifie 90% de la cible, pas le parent.)

110
Josef Engelfrost