10

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;
}
Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Gradlon von Kaenel
  • 159
  • 1
  • 2
  • 8
  • Without HTML (see [MCVE]) we can't determine the issue. Also, transforms work fine in Edge now, so the issue likely at fault here, if it ever was one, is also no longer reproducible (you can't get old versions of Edge). – TylerH Aug 06 '21 at 15:12
  • transforms are still having issues on certain page elements even in the latest versions, this is rooted in the same (for decades) problem in many browsers of not having the correct or same _default_ values or differently interpreting "initial" and "default". As a general rule if you run into problems set ALL the values you can that might change it's behavior. If that doesn't work, explore bug reports, check versions, though as above says, you cant usually have old versions unless you blocked updates or explicitly and forcibly installed it manually in which case you would know :) – osirisgothra Jan 09 '23 at 20:23

4 Answers4

10

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

Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
4

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.

Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
  • 11
    The question is about Edge, not Internet Explorer. Edge is CSS3 standards-compliant, and there is no need for prefixes. – John Weisz Oct 23 '17 at 23:53
-1

I found some differences:

When I try rotate (transform) element with display:inline, that not work in EDGE.

But, when I use display: inline-block then transform works.

Just try this (in MS EDGE):

<style>
 #good span { display: inline-block; transform: rotate(-10deg); }
 #bad span { transform: rotate(-10deg); }
</style>

<div id="good"><span>WELCOME</span></div>

<div id="bad"><span>WELCOME</span><div>
rony
  • 1
  • This is not an issue with Edge, it is the implementation of the spec. See https://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements – TylerH Aug 06 '21 at 14:04
-5

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.

iyyappan
  • 767
  • 4
  • 11