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

Solution 1

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

Solution 2

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.

Comments

[Bram Vanroy]

This is not what the user asks for.

[John Weisz]

The question is about Edge, not Internet Explorer. Edge is CSS3 standards-compliant, and there is no need for prefixes.

[TylerH]

This is not an issue with Edge, it is the implementation of the spec. See stackoverflow.com/questions/14883250/…