悬停时 CSS translate3d 缩放混乱（Chrome）

Question

基本上，CSS 3d 变换在悬停事件时跳跃（或无序缩放）。 要查看此故障，您需要快速进出几次（仅限 Chrome）。

Example 1
Example 2

代码尽可能简单：

<div></div>

div {
    width: 50px;
    height:50px;
    background: blue;
    -webkit-transition: -webkit-transform 0.3s ease-out,
                        background 0.3s ease-out;
}
div:hover {
    background: red;
    -webkit-transform: perspective(100px) translate3d(10px, 10px, 20px);
}

我已尝试附加 -webkit-backface-visibility: hidden;正如我在 Chrome 中相关的跳跃/闪烁问题中找到了这个解决方案，但在我的情况下它什么也没做。

有人知道这个问题吗？还是我做错了什么？

Answer 1

发生这种情况是因为您没有在元素的:hover 状态之前提供任何默认翻译值。只需为这些添加默认值，问题就会消失：

示例 1

div {
    width: 50px;
    height:50px;
    background: blue;
    -webkit-transition: -webkit-transform 0.3s ease-out,
                        background 0.3s ease-out;
    -webkit-transform: translate3d(0, 0, 0);
}

JSFiddle demo.

示例 2

div:nth-child(2) {
    background: rgba(0, 0, 255, .5);
    -webkit-transform: translateZ(0);
}

JSFiddle demo.