1

私は、人気のあるサイドバー インタラクション パターンを使用する小さな 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: translatepx 値で使用すると、すべて正常に動作します。

他の誰かがこれで問題を経験し、回避策を見つけましたか?
アプリのパフォーマンスを向上させるために、ハードウェア アクセラレーションをサポートする方法を使用したいと考えています。

4

1 に答える 1