CSS-Transformation funktioniert nicht in Edge

Question

Ich bin bei dem folgenden Problem fest.

Auf this site that I created habe ich eine Galerie, die am unteren Rand der Seite befindet. Wenn ich über die Daumen schwebe, fliegen sie wie verrückt herum, was ich nicht will. Es funktioniert wie ein Zauber auf anderen Browsern; nur Microsoft Edge ist betroffen.

Kann mir jemand helfen, damit sich die Bilder wie erwartet verhalten?

Die CSS sieht wie folgt aus:

.node-gallery { 
    float: left; 
    width: 150px; 
    height: 150px; 
    position: relative; 
    margin: 0 60px 50px 0; 
} 

.node-gallery img { 
    position: absolute; 
    bottom: 0px; 
} 

.node-gallery .image1 { 
    left: 0px; 
    z-index: 3; 
    -webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -o-transition: all 0.2s ease 
} 

.node-gallery .image2 { 
    left: 7px; 
    height: 148px; 
    z-index: 2; 
    -webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -o-transition: all 0.2s ease 
} 

.node-gallery .image3 { 
    left: 14px; 
    height: 145px; 
    z-index: 1; 
    -webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -o-transition: all 0.2s ease 
} 

.image1, .image2, .image3 { 
    border: 5px solid #F3F3F3!important; 
    box-shadow: 1px 1px 2px #666; 
    -webkit-shadow: 1px 1px 2px #666; 
    -webkit-transform: rotate(0deg) translate(0px); 
} 

.node-gallery:hover .image1 { 
    z-index: 6; 
    -ms-transform: rotate(-5deg) translate(-20px, -2px); 
    -ms-transform-origin: center bottom; 
    -webkit-transform: rotate(-5deg) translate(-20px, 2px); 
    -webkit-transform-origin: center bottom; 
    -moz-transform: rotate(-5deg) translate(-20px, -2px); 
    -moz-transform-origin: center bottom; 
    -o-transform: rotate(-5deg) translate(-20px, -2px); 
    -o-transform-origin: center bottom; 
} 

.node-gallery:hover .image2 { 
    z-index: 5; 
    -ms-transform: rotate(-2deg) translate(0px, 2px); 
    -ms-transform-origin: center bottom; 
    -webkit-transform: rotate(-2deg) translate(0px, -2px); 
    -webkit-transform-origin: center bottom; 
    -moz-transform: rotate(-2deg) translate(0px, 2px); 
    -moz-transform-origin: center bottom; 
    -o-transform: rotate(-2deg) translate(0px, 2px); 
    -o-transform-origin: center bottom; 
} 

.node-gallery:hover .image3 { 
    z-index: 4; 
    -ms-transform: rotate(5deg) translate(20px, -2px); 
    -ms-transform-origin: center bottom; 
    -webkit-transform: rotate(5deg) translate(20px, 2px); 
    -webkit-transform-origin: center bottom; 
    -moz-transform: rotate(5deg) translate(20px, -2px); 
    -moz-transform-origin: center bottom; 
    -o-transform: rotate(5deg) translate(20px, -2px); 
    -o-transform-origin: center bottom; 
} 

Answer 1

Sie müssen die Standard transition und transform Eigenschaften schreiben, und dann das -ms Präfix für Microsoft Internet Explorer:

.selector { 
    -webkit-transform: scale(); /* android, safari, chrome */ 
    -moz-transform: scale(); /* old firefox */ 
    -o-transform: scale(); /* old opera */ 
    -ms-transform: scale(); /* old IE */ 
    transform: scale(); /*standard */ 
    } 

Das gleiche in transition Eigenschaft . Ihre Lösung ist, den Standard zu schreiben.

Answer 2

Versuchen Sie, dies zu tun,

Ihre Galerie Bilder der fancybox API.SO mit dort Option für Veränderungen ist die Animationstypen in fancybox.js.

Referenz: http://fancybox.net/api

Sie benötigen fancybox js Datei zu gehen, finden 'transitionIn, transitionOut' Änderung Effekt des Übergangstyp. Kann auf 'elastisch', 'Fade' oder 'keine' eingestellt werden.

Nach den Fenstern werden alle Browser in Ordnung sein.

Answer 3

Ein paar Monate zu spät, aber ich glaube, ich habe gerade diesen Fehler gefunden und eine Lösung gefunden. Microsoft Edge 13 scheint ein Problem bei der Interpretation einiger normalerweise akzeptabler Werte für transform-origin zu haben. Speziell für mich ignorierte es den Wert right center, aber funktioniert gut mit top left, was mich glauben lässt, dass der center Wert (den ich in Ihrem Beispielcode sehe) das Problem sein könnte.

Der Fix für mich war, Prozentwerte zu verwenden, so würde transform-origin: center bottomtransform-origin: 50% 100% werden. Ich hoffe, dies hilft jedem anderen, der auf dieses Problem trifft.

Beachten Sie, dass trotz der Antwort mit der höchsten Bewertung, die das Präfix ms- vorschlägt, diese Frage über den aktuellen MS Edge-Browser, und dieses Präfix seit Internet Explorer 9 für die Transformationseigenschaft nicht erforderlich ist (per caniuse.com).