css - 几个盒子是异步动画(翻译)的

Question

描述:

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

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

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

当它出现时，它是从右向左滑动的。同时标题和内容被推到左边。

解决方案基于:

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

问题

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

JSFiddle

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

浏览器

Chrome 39

这可能是什么原因造成的？哪里出了问题...提前致谢。

Answer 1

添加以下内容:

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

Demo Fiddle