Преобразование CSS не работает в Edge

Question

Я застрял в следующей проблеме.

this site that I created, У меня есть галерея, которая находится в нижней части страницы. Если я надвигаюсь на большие пальцы, они летают, как сумасшедшие, чего я не хочу. Он работает как шарм в других браузерах; затрагивается только Microsoft Edge.

Может кто-нибудь помочь мне, чтобы изображения выглядели так, как ожидалось?

CSS-выглядит следующим образом:

.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

Вы должны написать стандартные transition и transform свойства, а затем -ms префикс для 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 */ 
    } 

То же самое в transition собственности , Ваше решение - написать стандарт.

Answer 2

Попробуйте сделать этого,

вашей галереи изображений с помощью FancyBox API.SO есть возможность для изменения в типы анимации в fancybox.js.

Ссылка: http://fancybox.net/api

Вы должны пойти FancyBox файл расслоение плотной, найти 'transitionIn, transitionOut' изменение эффекта переходного типа. Может быть установлен на 'эластичный', 'fade' или 'none'.

В соответствии с окнами все браузеры будут в порядке.

Answer 3

Немногочисленные месяцы опоздали на это, но я считаю, что я просто столкнулся с этой же ошибкой и нашел решение. Похоже, что Microsoft Edge 13 имеет проблему, интерпретирующую некоторые обычно приемлемые значения для transform-origin. В частности, для меня это игнорировало значение right center, но работало нормально с top left, что привело меня к тому, что значение center (которое я вижу в вашем примере кода) может быть проблемой.

Исправление для меня было использовать процентные значения, поэтому transform-origin: center bottom станет transform-origin: 50% 100%. Надеюсь, это поможет всем, кто сталкивается с этой проблемой.

Обратите внимание, что, несмотря на самый высокий голос, предлагающий префикс ms-, этот вопрос касается недавнего браузера MS Edge, и этот префикс не требуется, так как Internet Explorer 9 для свойства transform (за caniuse.com).