javascript - 在 Android native 浏览器 (4.x) 上动画翻译百分比

Question

我正在开发一个使用流行的侧边栏交互模式的小型网络应用程序。当使用 CSS3 动画将侧边栏转换为 View 时，动画会滚出 View ，但会停在 Android native 浏览器中的正确位置。

动画代码很简单:

#wrapper > #off-canvas { 
    -webkit-transform: translate(0, 0);
       -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
         -o-transform: translate(0, 0);
            transform: translate(0, 0);
}
#wrapper > #off-canvas.off { 
    -webkit-transform: translate(80%, 0);
       -moz-transform: translate(80%, 0);
        -ms-transform: translate(80%, 0);
         -o-transform: translate(80%, 0);
            transform: translate(80%, 0);
}

您可以在我制作的 JS-Fiddle 中看到行为。代码有点乱，但行为显然有问题。 (当然你需要一个 Android 设备才能重现错误)

FIDDLE

• 为“左”属性设置动画时，一切正常。
• 当使用带有 px 值的 transform:translate 时，一切正常。

有没有其他人遇到过这方面的问题并找到了解决方法？
我想使用一种支持硬件加速的方法来提高应用程序的性能。

Answer 1

你是对的。 native android 浏览器(不是 Chrome)过度滚动。它不喜欢 translate 属性。我可以通过使用 margin-left 来修复它。

#wrapper > #off-canvas.off { 
    margin-left:80%;
}

Here's a plunk.