3

私は携帯電話用のWebアプリに取り組んでいます。アプリは複数のスライド パネル (水平) で構成され、各パネルにはクリック可能な要素があります。touchstart、touchmove、touchend イベントを使用してタッチ イベントをキャプチャし、「-webkit-transform: translate3d」を使用して実際に要素を移動しています (水平スワイプに Brad Birdsall の swipe.js を使用 - https://github.com/bradbirdsall/Swipe）。また、フロント パネルにフェード スライドショーを追加しました。css を使用してスライドおよびフェードインおよびフェードアウトするアニメーション化された画像:

@-webkit-keyframes slideLeft{
    0% {
        -webkit-transform: translate3d(0px, 0px, 0px);
        opacity:0;
    }
    30%{
        -webkit-transform: translate3d(-60px, 0px, 0px);
        opacity:1;
    }
    70%{
        -webkit-transform: translate3d(-140px, 0px, 0px);
        opacity:1;
    }
    100% {
        -webkit-transform: translate3d(-200px, 0px, 0px);
        opacity:0;
    }
}

.slideLeft{
    -webkit-animation: slideLeft 10000ms linear;
    -moz-animation: slideLeft 10000ms linear;
    -o-animation: slideLeft 10000ms linear;
    animation: slideLeft 10000ms linear;
}

これらの効果をいくつか追加した後、アプリは 50% 以上の確率で正しく読み込まれなくなりました。ブラウザーが読み込まれると、画面上のさまざまな場所でランダムな黒い四角形が点滅します (いくつかの例については、添付のスクリーンショットを参照してください)。数秒間点滅して消えることもありますが、動き続けることもあり、すべてのアニメーションが非常に遅くなり、ぎくしゃくします。

これが私が見ているもののサンプルスクリーンショットです。正方形は画面上を動き続けます。

ここに画像の説明を入力 ここに画像の説明を入力

この問題は、実際には、デフォルトの Android ブラウザー (Chrome は完全に正常に動作しますが、デフォルトのブラウザーで動作する必要があります) の samsung galaxy Android フォンでのみ発生します。すべてが iPhone で完全に動作し、これまでにテストした他のすべての Android でも問題なく動作します。サムスンでは、すべてが正しく読み込まれることがありますが、ほとんどの場合はそうではありません。いくつかのアニメーションを削除しようとしましたが、問題は非常に一貫性がありません。コードを変更せずに更新を続けると、ある時点で必ず表示されます。

誰かが以前にこの問題を抱えていましたか? スライド パネルが 2 つだけで、フロント パネルにスライドショーがあるシンプルなバージョンのアプリを作成しました。コードは github にあります: https://github.com/mashabelyi/css-transitions-test。携帯電話で www.webitap.com/test からアプリにアクセスできます。

この単純化されたバージョンでは、黒い四角形があまり表示されません。これは、読み込まれているコンテンツの量と関係があると思われます。最初に表示され、その後消えることもあります。アプリがどの画面サイズにも合うように、要素に対して多くの JavaScript DOM 操作を行っています。これが問題の潜在的な原因になる可能性はありますか? translate3d の代わりに translateX を使用し、translate3d(0,0,0) を呼び出してハードウェア アクセラレーションを 1 回トリガーしようとしましたが、問題は解決しません。

どんな洞察も大歓迎です！

4

1 に答える 1

0

私は問題を解決しました！使用していた画像が大きすぎることがわかりました。画像を圧縮したところ、すべてがうまく機能するようになりました。

于 2012-09-23T01:16:39.643 に答える