かなりの量の CSS と JavaScript を使用してサイトを構築していますが、モバイル デバイス、特に iPad と iPhone でのパフォーマンスに多くの問題があります。
css の box-shadow、text-shadow、radius、gradient プロパティをオフにして、すべての javascript をオフにしようとしましたが、まだ大幅に遅れています。JavaScript をオフにしてもパフォーマンスはあまり向上しませんが、これらの CSS プロパティをオフにすると少しは改善されました。
より具体的には、スクロールしようとして指を離すと、離した場所にスクロールが「くっつきます」。小さい画面でも、特に iPhone や iPod では、ズームインとスクロールがかなり苦手です。
私が見落としているものがあるように感じます。手がかりはありますか？
[サイトを削除しましたが、私の回答は根本的な問題をより詳細に示しています。動作が遅いのは、overflow:scroll] プロパティが原因です。
YSlowを実行してください！テスト。それは私にいくつかの興味深い点を与えます...
This page has 10 external Javascript scripts. Try combining them into one.
This page has 5 external stylesheets. Try combining them into one.
overflow : scroll;
私の問題でした...
-webkit-overflow-scrolling: touch;
この行を追加すると、スクロールがスムーズになりました。
最初は、複数の div が積み重なった問題だと思っていましたが、さらに徹底的に調査したところ、iOS タッチの動作を詳しく説明している次のサイトを見つけました: http://remysharp.com/2012/05/24/ issues-with-position-fixed-scrolling-on-ios/
私が思っていたよりもずっと簡単な解決策。
編集：
それほど速くはありませんが、一部の要素で表示の問題が発生しています。もう一度調べて、これを見つけました：http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/
使用するように指示します
-webkit-transform: translate3d(0,0,0);
すべての相対要素で。
いくつかの要素でそれを使用したとき、その種は機能しましたが、再び何か他のものを壊しました. 下にスクロールすると、ページに約 3 秒かかります。以前は表示されていなかったコンテンツをロードするには...
Mobile Safari が新しい Internet Explorer のように感じられますが、何もないよりはましだと思い
ます 別の修正プログラムを見つけようとします...
edit2:
私はそれをほとんど機能させることができました。まだいくつかの表示の問題があります (私の要素の背後にある主な背景にはまだ 2 ～ 3 秒の読み込みの問題があります) が、少なくとも他の要素はすぐに表示されます。
私がしたことは使用です
-webkit-transform: translate3d(0,0,0);
ユニバーサル セレクター *{}
スクロール動作との下位互換性のために、 overthrowなどのポリフィルについて言及しています。