在Android Native Browser (4.x)上动画化翻译百分比

Animating translate percentages on Android Native Browser (4.x)

本文关键字：动画 翻译 百分比 Native Android Browser      更新时间：2023-09-26

我正在开发一个使用流行的边栏交互模式的小型web应用程序。当使用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的行为。代码有点乱，但行为明显有缺陷。(当然你需要一个Android设备来重现错误)

小提琴

  • 当动画"left"属性时，一切正常。
  • 当使用transform: translate和px值时，一切正常。

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

你说得对。原生android浏览器(不是Chrome)会过度滚动。它不像translate的性质。我能够修复它，只是使用margin-left代替。

#wrapper > #off-canvas.off { 
    margin-left:80%;
}
相关文章：