CSS变换在Edge浏览器中无法正常工作

Question

我卡在了以下问题。

在我创建的这个网站上，我有一个位于页面底部的图库。如果我悬停在缩略图上，它们会像疯了一样飞来飞去，这不是我想要的。在其他浏览器上它工作得很好; 只有微软 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;
}

- Gradlon von Kaenel

---

如果没有HTML（请参见[MCVE]），我们无法确定问题所在。此外，转换现在在Edge中运行良好，因此，如果曾经存在问题，那么可能是问题的原因，也不再可重现（您无法获取旧版本的Edge）。 - TylerH

变换在某些页面元素上仍然存在问题，即使在最新版本中也是如此，这根源于许多浏览器存在的几十年来都没有正确或相同的“默认”值或不同的解释“initial”和“default”的问题。作为一般规则，如果你遇到问题，请设置所有可能导致其行为发生变化的值。如果那不起作用，请查看错误报告，检查版本，虽然如上所述，你通常不能拥有旧版，除非你阻止了更新或明确强制手动安装它，在这种情况下，你会知道的 :) - osirisgothra

Answer 1

几个月前，我遇到了同样的 bug 并找到了解决方案。似乎 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）。

- Jon Uleis

Answer 2

另一位用户编辑：此答案不适用于Microsoft Edge浏览器。

您需要编写标准的transition和transform属性，然后为Microsoft Internet Explorer添加-ms前缀：

 .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属性中也是如此。您的解决方案是编写标准化的代码。

- Marcos Pérez Gude

---

问题是关于Edge浏览器，而不是Internet Explorer。Edge浏览器符合CSS3标准，无需添加前缀。 - John Weisz

Answer 3

我发现了一些差异：

当我尝试使用display:inline旋转（transform）元素时，在EDGE中无法工作。

但是，当我使用display:inline-block时，transform可以正常工作。

请在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

---

这不是Edge的问题，而是规范实现的问题。请参见https://dev59.com/T2Up5IYBdhLWcg3w_rkl - TylerH

Answer 4

试着做到这一点，

使用fancybox API来展示你的画廊图片。因此，在fancybox.js中有更改动画类型的选项。

Reference:http://fancybox.net/api

你需要打开fancybox js文件，找到'transitionIn, transitionOut'并将其更改为所需的过渡效果类型。可以设置为'elastic', 'fade'或'none'。

根据窗口所有浏览器都将正常工作。

- iyyappan

---

这不是用户所要求的。 - Bram Vanroy