几个框被异步动画（翻译）

Question

说明：

页面由三个主要框组成：顶部的标题、右侧的菜单和内容区域。

标题和菜单必须与属性position: fixed

最初菜单是隐藏在页面上的。它在用户点击时出现，例如在特定按钮上。

当它出现时，它会从右向左滑动。同时header和content向左推。

解决方案基于：

使用 CSS3 属性 transform 和 translate3d 值和 transition: transform 0.5s linear

问题

在菜单和带有标题框的内容之间的动画期间，我们可以看到闪烁的白色区域。玩背面可见性并没有帮助。

JSFiddle

这是一个在线示例：http://jsfiddle.net/milax/5uc7or6r/6/

浏览器

铬 39

这可能是什么原因造成的？出了什么问题...在此先感谢。

Answer 1

已修复。

问题在于属性translate3d 使用百分比而不是像素。所以，

transform: translate3d(100%, 0, 0);

必须改为

transform: translate3d(200px, 0, 0);

当然，如果你确切知道菜单的宽度。

Answer 2

添加以下内容：

.site-wrapper div {
    transition: transform 0.5s linear;
    backface-visibility: hidden;
    outline: 1px solid transparent; /* <--- fixes horrible anti-aliasing */
}

Demo Fiddle