谷歌浏览器奇怪的 Css3 转换错误

Question

我在 Google Chrome 中遇到了一个非常奇怪的错误。

Fiddle

这是我的代码

<div id="wrapper">
    <div class="trans">

    </div>
</div>

body {
    background:green;
    overflow: hidden;
}

.trans {
    width: 155550px;
    height: 200px;
    background: #000;
    position: relative;
    -webkit-transition-property:-webkit-transform, left, top;
    -webkit-transition-duration:0.600s;
    -webkit-transform:translate3d(0px,0,0);
    -webkit-transition-timing-function:ease-in-out;

}
#wrapper:hover .trans {
        -webkit-transform:translate3d(-155550px,0,0);
}

当您将鼠标悬停在包装 div 上并转换时，背景会闪烁以显示透明区域。该错误的任何解决方案？我在 Win8 上使用最新版本的谷歌浏览器

谢谢

更新： 这就是我要为想知道我实际在做什么的用户实现的目标

http://jsfiddle.net/vpdpX/

Answer 1

这与您使用 div 的宽度有关。

我将采用您实际希望 div 为页面宽度的 100% 的值，在这种情况下它可以工作。

jsFiddle

.trans {
    width: 100%;
    height: 200px;
    background: #000;
    position: relative;
    -webkit-transition-property:-webkit-transform, left, top;
    -webkit-transition-duration:0.600s;
    -webkit-transform:translate3d(0px,0,0);
    -webkit-transition-timing-function:ease-in-out;     
}

#wrapper:hover .trans {
        -webkit-transform:translate3d(-100%,0,0);
}

编辑

要实现这一点，我建议您在屏幕外动态添加和删除幻灯片，这样您就不会遇到这个问题。

Answer 2

首先，我会重新评估您正在尝试做的事情以及您尝试实施它的方式。鉴于所提供的信息很难提供太多帮助 - 但是您的 div 的宽度过大 - 任何应用于折叠的动画几乎肯定不会正确地这样做。

也就是说，您使用了错误的动画类型和错误的属性——您只需要在宽度上添加一个过渡，然后在悬停时更改宽度。这适用于大小合理的 div 您只会遇到 div 155550px 宽的问题

See fiddle

CSS

body {
    background:green;
    overflow: hidden;
}

.trans {
    width: 100%;
    height: 200px;
    background: #000;
    position: relative;
    transition: width 1s;
    -moz-transition: width 1s; /* Firefox 4 */
    -webkit-transition: width 1s; /* Safari and Chrome */
    -o-transition: width 1s; /* Opera */

}
#wrapper:hover .trans {
    width:0px;
}