私は、人気のあるサイドバー インタラクション パターンを使用する小さな 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デバイスが必要です)
- 「左」プロパティをアニメーション化すると、すべて正常に機能します。
transform: translate
px 値で使用すると、すべて正常に動作します。
他の誰かがこれで問題を経験し、回避策を見つけましたか?
アプリのパフォーマンスを向上させるために、ハードウェア アクセラレーションをサポートする方法を使用したいと考えています。