5

この質問は、通常の jQuery サイトと jQuery Mobile サイトの両方に当てはまります。現在、同じ問題でそれぞれのサイトに取り組んでいるためです。もちろん、これはモバイル デバイス、または少なくとも iPhone 4 でのみ発生する問題です。

簡単に言えば、ヘッダーは で設定されposition: fixed; top: 0;ます。特定の要素またはページの上部にスクロールするためにjQueryanimate()関数を使用すると、スクロールするページに追いつかないかのように、ヘッダーが画面の上部から上下にジャンプします。

これは単にモバイル デバイスのハードウェアの制限ですか、それとも、この発生を排除するか、少なくとも最小限に抑えるためにできることはありますか?

4

3 に答える 3

28

私は同じ問題を抱えていました.ページ内であまりにも多くのことが起こっているときに発生するバグのようtransform: translateZ(0);-webkit-transform: translateZ(0);です.ブラウザを強制する次の変換コードを固定位置要素に追加することで修正できました, ( )ハードウェア アクセラレーションを使用してデバイスのグラフィック プロセッシング ユニット (GPU) にアクセスし、ピクセルを飛ばします。一方、Web アプリケーションはブラウザーのコンテキストで実行されるため、レンダリングの大部分 (すべてではないにしても) をソフトウェアが実行できるため、遷移の処理能力が低下します。しかし、Web も追いついてきており、現在ではほとんどのブラウザー ベンダーが、特定の CSS ルールによってグラフィカル ハードウェア アクセラレーションを提供しています。

-webkit-transform の使用: translate3d(0,0,0); CSS トランジションのために GPU を起動し、よりスムーズに (より高い FPS) にします。

注: translate3d(0,0,0) は、表示内容に関しては何もしません。オブジェクトを x、y、z 軸で 0px 移動します。ハードウェアアクセラレーションを強制するのは単なるテクニックです。

#element {
    position: fixed;
    z-index: 9990;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
于 2014-09-18T23:03:16.097 に答える
0

モバイル ブラウザーでの固定要素のサポートは非​​常に限られています。絶対位置 + JS ソリューションを選択する必要があります。この件に関する興味深い記事を次に示します。

モバイルサイト用に修正した方法で、スクロールした距離に応じて固定要素の上部を再調整しました。

Ps: js (パララックス、アンカー タグ アニメーションなど) を使用してスクロールをシミュレートしている場合、要素が固定されている場合、ユーザーが物理的に数ピクセルスクロールする前にクリックできなくなります。iOSの既知のバグです。

于 2013-08-12T11:42:57.237 に答える