45

私の場合、上部に固定DIV、下部に3つの固定タブ、固定divがあります（これは、ログインしたときにのみ表示されます-将来的に）。

Chromeでのみスクロールパフォーマンスが低下します-FFとIEは問題ありません。

Chrome、Fixed Positioning、Scrollingに関するいくつかの問題レポートを用意しましたが、誰か提案があるかどうかを確認したいですか？私は本当にこれらの要素をそれらの場所で修正したいのですが、Chromeでの良好なスクロールパフォーマンスも望んでいます。

修正に関するアイデアはありますか？

注：クロムを拡大すると、はるかに目立ちます...

更新：他の人が同様の問題を抱えていることを読み、このChromeの問題を更新しました。これは、後で136555に統合され、Chrome26以降に修正されたとされています。

4

5 に答える 5

86
于 2013-02-28T23:11:44.610 に答える
16

@Coryluluの最初の解決策は機能しますが、完全ではありません（まだ少しスタッターがありますが、はるかに少ないです）。-webkit-backface-visibility: hidden;また、スタッターをなくすために、固定要素に追加する必要がありました。

したがって、私にとっては、ページで固定要素を使用するときにクロムでスクロールダウンスタッターを防ぐために、次のことが魅力のように機能しました。

-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;

編集: Webkit-transform と webkit-backface-visibility の両方で、フォントと画像がぼやけます。そのため、ホバー状態でのみ両方を適用するようにしてください。

于 2014-09-11T14:24:19.823 に答える
2

この特に厄介な問題に関する最近のバグ レポートがあります: http://code.google.com/p/chromium/issues/detail?id=155313

フローティング要素と大きな画像の組み合わせに関係しています。Chrome Canary 24.0.1310.0 ではまだ問題があります。

于 2012-10-28T20:50:33.387 に答える
1

このフロント エンドを高速化する方法はいくつかあります。いくつかのアイデアについては、 PageSpeed Insights Chrome プラグインを試してみてください。個人的には、このフロント エンドをTwitter の Bootstrap のようなフレームワークの上に同じデザインで再構築することをお勧めしますが、このフロント エンドの詳細が必要な場合は、次のようにします。

  • おっしゃるとおり、ヘッダーバーの配置が CSS レンダリングに最も時間をかけています ( CSS ストレステストの結果)。そこにある大きな画像を取り除き、幅 1px の背景画像に置き換えます。また、ロゴなどの画像 (およびこのヘッダー内の他のすべての画像) のサイズを不必要に変更しています。実際のサイズのバージョンに置き換えてください。
  • すべてのコンテンツ画像を最適化することで、転送されるバイト数を大幅に節約できます
于 2012-10-21T19:44:11.937 に答える