1

我正在开发一个使用流行的侧边栏交互模式的小型网络应用程序。当使用 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 中看到该行为。代码有点乱，但行为显然是错误的。（当然你需要一个安卓设备才能重现错误）

小提琴

  • 为“左”属性设置动画时，一切正常。
  • 使用transform: translatepx 值时，一切正常。

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

4

1 回答 1

0

你是对的。本机 android 浏览器（不是 Chrome）过度滚动。它不喜欢该translate物业。我能够通过使用来修复它margin-left。

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

这是一个笨拙的。

于 2013-05-27T12:23:28.103 回答