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