IE 10、11 和 Edge 在悬停动画上抖动答案

【问题标题】：IE 10, 11 & Edge shaky on hover animationIE 10、11 和 Edge 在悬停动画上抖动
【发布时间】：2017-03-02 14:32:24
【问题描述】：

我有一个简单的示例 (https://jsfiddle.net/5x9yLyxq)，其中包含两个具有悬停功能的“图块”（只有 css，没有 javascript）。

它们的初始状态是这样的

.tiles div{
   -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

然后我有一个看起来像这样的 :hover css：

.tiles div:hover{
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
   box-shadow: 0 0 11px 3px rgba(0, 0, 0, 0.2);
}

问题：在 IE（任何，甚至 Edge）中，缩放动画“抖动”（看起来很糟糕）。

有谁知道让动画平滑（比如在 Chrome 中），可以是 js 库或 css 我不在乎，只需要平滑？

谢谢

【问题讨论】：

标签： html css internet-explorer transform scale

【解决方案1】：

我发现这是由 transform-origin 属性引起的，默认为 50%。

如果您将其更改为刚好超过该值的值，则抖动（神奇地）停止。尝试将以下内容添加到您的样式表中：

transform-origin: 50.01%;

transform-origin 是 well supported 用于 IE8 及更高版本、Edge 和所有其他主要浏览器。

这是一个基于 @DavidDunham 最初发布的 JSfiddle 的 working example。

【讨论】：

【解决方案2】：

你可以试试这个

-ms-transform: scale(1.1);

适用于 IE 9 或更高版本。

【讨论】：