0

Chrome を使用して iPad でhttp://www.tekiki.comにアクセスすると、サイトは最初は問題なく表示されますが、1 ～ 2 秒後にページ上のすべてのテキストが非表示になり、しばらくすると再び表示されます。これは、テキストの点滅またはちらつきの延長に似ています。

デスクトップでは、これは起こりません。

手がかりはありますか？-webkit-backface-visibility:hiddenを試しましたが、違いはありませんでした。アニメーションもありません。

ありがとう！

4

3 に答える 3

5

サイトには、ベスト プラクティスに従っていないものがいくつかあります。

スクリプトは、body タグの直前で、ページの最後にある必要があります。頭に台本があり、体の一部に台本があり、下部にいくつか台本があります。

すべてのスタイルをヘッドに配置し、スクリプトの前に配置する必要があります (推奨されるスクリプトの配置に従わなくても)。フォントの CSS は 2 つのスクリプト タグの後に配置されます。これにより、スクリプトがダウンロードされ、解析され、場合によっては実行されるまで、フォントの読み込みが遅れます。これにより、フォントが実行されているときにフォントの「ちらつき」が発生する可能性があります。読み込みが遅くなりました。さらに、ページ全体にスタイル タグが配置されているため、再描画、リフロー、ちらつきが発生する可能性があります。

head と body の間に IE に適用するスタイルの条件付きコメントがあります。そこではスタイルが有効ではありません (私は認識しています)。それらは他のすべてのスタイルの後に配置する必要がありますが、頭の中に残します。

scaffold.css からインポート ステートメントを削除し、ページに直接配置して、ブラウザーがスタイルシートを順次ではなく並行してダウンロードできるようにします。または、それらを 1 つのファイルに結合して、要求の数を減らすことをお勧めします。

CSS と JavaScript を縮小することも検討してください。

実際、私はあなたの非モバイル ページを探していました。モバイル ページの方がずっと良く見えますが、これらを逆にする必要があります。

<!-- JQ -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

<!-- Misc -->
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>

最初にフォントを読み込み、次に jquery を読み込みます。ページの下部にある script タグの直前に jquery インクルードを移動することも検討してください。

于 2013-05-20T04:40:17.850 に答える
2

開発者ツールを使用してページをざっと見てみると、ページに表示が非表示に設定された要素がたくさんあることがわかります。フッターの上部には、doc.ready 呼び出しにラップされていない一連の jQuery を実行するインライン スクリプトがあります。

スクリプトの開始時に、これを実行します。

var SHOW_PAGE = 'FEATURED';

// Determine which page to show and configure accordingly
// Hide page specific elements first
$( '.featured, .catalog, .category, .list' ).hide();

// Show right page
if ( SHOW_PAGE == 'CATALOG' ) {
$( '.catalog' ).show();
get_web_data();
} else if ( SHOW_PAGE == 'CATEGORY' ) {
$( '.category' ).show();
get_web_data();
} else {
$( '.featured' ).show();
get_featured_apps();
}

これらの各要素の表示を変更すると、再描画がトリガーされ、モバイルでは非常にコストのかかる作業になる可能性があります。それがあなたの問題かどうかはわかりませんが、開始するのに適した場所かもしれません.ChromeはiOSでsafari @がそのようなものを処理するのと同じパフォーマンスを発揮しない場合があります.

于 2013-05-20T17:31:15.243 に答える
0

ブラウザのキャッシュをリセットして、もう一度お試しください。いくつかのデバイス (iPad、iPhone、OSX) で正常にテストされました。

于 2013-05-07T21:08:49.750 に答える