CSS translate3d是缩放混乱时悬停(Chrome)

Question

基本上CSS 3d变换是跳跃(或无序缩放)悬停事件。要查看此故障，您需要快速悬停几次(仅Chrome)。

示例1
示例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);
}

<<p> JSFiddle演示/strong>。示例2

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

<<p> JSFiddle演示/strong>。