在 Android 原生浏览器 (4.x) 上动画翻译百分比

Question

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

动画代码很简单：

#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 中看到该行为。代码有点乱，但行为显然是错误的。 （当然你需要一个安卓设备才能重现错误）

FIDDLE

• 为“left”属性设置动画时，一切正常。
• 将 transform: translate 与 px 值一起使用时，一切正常。

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

Answer 1

你是对的。本机 android 浏览器（不是 Chrome）过度滚动。它不喜欢 translate 属性。我可以改用margin-left 来修复它。

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

Here's a plunk.