CSS transform is not working in Edge

Question

I am stuck at the following problem.

On this site that I created, I have a gallery which is located on the bottom of the page. If I hover over the thumbs, they fly around like crazy which is not what I want. It works like a charm on other browsers; only Microsoft Edge is affected.

Can someone help me out to get the images to behave as expected?

The CSS looks like this:

.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

Ed. by another user: This answer does not apply to the Microsoft Edge browser.

You need to write the standard transition and transform properties, and then the -ms prefix for 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 */
  }

The same in transition property. Your solution is to write the standard.

Answer 2

Few months late on this, but I believe I just encountered this same bug and found a solution. It seems like Microsoft Edge 13 has a problem interpreting some normally acceptable values for transform-origin. Specifically for me, it was ignoring the value right center, but working fine with top left, leading me to believe the center value (which I see in your example code) might be the issue.

The fix for me was to use percentage values, so transform-origin: center bottom would become transform-origin: 50% 100%. Hope this helps anyone else who encounters this issue.

Note that despite the top-voted answer suggesting the ms- prefix, this question is about the recent MS Edge browser, and that prefix has not been required since Internet Explorer 9 for the transform property (per caniuse.com).

Answer 3

Try do to this,

Your gallery images using the fancybox API.SO there is option for change the animation types in fancybox.js.

Reference:http://fancybox.net/api

You need to go fancybox js file,find 'transitionIn, transitionOut' change to effect of The transition type. Can be set to 'elastic', 'fade' or 'none'.

According to the windows all browsers will be fine.