Firefox のウィンドウスクロールの jQuery イージングアニメーション (バグか私の悪さ?)

https://stackoverflow.com/questions/2097655

21-09-2019
|

質問

例
何よりもまず、私のコードと問題は次のとおりです。
http://www.nathanstpierre.com/MBX/showoff.html

問題
私が見ているのは、左側のボタンをクリックすると、ウィンドウが適切な見出しまでスクロールするということです。Firefox を除くすべてのブラウザ (...を含む)IE あえぐ）これは非常にスムーズです。ただし、ウィンドウの高さを低くすると、すべてのコンピューターでスムーズになります。私はすでにこれを複数のコンピュータと IE 7 ～ 8、Google Chrome、Safari、Firefox 3.5 で試しました。ページ上のグラフィックや色はすべて削除したので、それらは問題ではありません。あなたをフォローするサイドバーを削除しました、それだけではありません。

その理論
jQuery イージングプラグインは、移動する必要がある距離を計算し、指定された期間単位ごとに移動する必要があるピクセル数を分割します (たとえば、30 ミリ秒で 300 ピクセル、つまり 10px/ms)。他のブラウザはすべてこれをスムーズに移行できるように見えますが、ウィンドウスクロールイベントによって提供される粒度が、Firefox でスムーズに見えるほど十分に圧縮されていないのではないでしょうか?あるいは、間違ったイージングプラグイン、または間違った設定を使用している可能性があります。

コード

$("#sidenav a").click(function () {
        $("#sidenav a").animate({'color':'#6d6d6d'},{"duration":400});
        $(this).animate({"color":"#fff"},{"duration":400});
        clicktarget=$(this).attr("href");
        $("html, body").animate({scrollTop: $(clicktarget).offset().top},{"duration":300,"easing":"easeout"});
        return false;
      });

論理

サイドナビの onClick の各タグにイベントリスナーを追加します。これにより、そのリンクの href 属性と同じ ID を持つドキュメント内の要素の offset().top が取得され、現在のscrollTop からその要素の offset().top までアニメーション化されます。ロジックは健全で、Firefox を除くすべてのブラウザでスムーズに動作します。私の知る限り。

嘆願書

私の何が間違っているのでしょうか？これはバグですか?

ありがとう！

更新

まあ、ここで紹介されている答えのどれも実際に問題を解決するものではないので、良心の呵責を感じて選ぶことはできません。したがって、この回答に従っている場合は、お気に入りを選んでください。賞金は最も高いものに送られます。投票。

問題は、Firefox が a) 透明性をレンダリングする方法、および b) スクロールイベントを処理する方法にあるようです。十分なプロセッサー能力があれば、これは問題にならない可能性がありますが、残念なのは、IE (すべてのブラウザーの中でも) が劣ったハードウェアでもこれほど優れたレンダリングを実行できることです。この問題について Mozilla に問い合わせて、それについて何か意見があるか確認してみます。

追加の教育として、以下が無料で提供されます。

透明性あり
 透明なし

編集：質問は解決しましたが、今は選択できません。それがどうしたのか知っている人はいますか？

最終更新賞金を取り戻すのに十分な時間が経過したので、私は正しい答えを選びました。box-shadow と他のいくつかのエフェクトは、レンダリング方法が原因で、Firefox でスクロールの問題を引き起こすようです。FF 4.0 + ではこの問題がより適切に処理されますが、一部のコンピューターでは依然として問題が発生します。これは、CSS3 を実装している人々にとって大きな注意事項です。すべてのブラウザでインタラクションをテストし、パフォーマンスコストが正当であるかどうかを確認します。

解決

このプロパティの宣言を削除（またはFirebugのでそれらを無効にする）場合は、

は、パフォーマンスの低下がスクロールアニメーションがよりスムーズで、-moz-box-shadowプロパティによって引き起こされているように見える。

他のヒント

jQueryの1.4を試してみてください。 jQueryの1.3.2、その後、はるかに高速になります。

思われます

あなたは、物事のこれらの種類をデバッグコード内で圧縮されていないのjsファイルを入れて、機能をプロファイリングし、それのプロフィールとFirebugのを使用する必要がある場合。

このページは 2 つの背景 (1 つは透明な .png です) で少し重くなっています。

問題は、Firefox やアニメーションを処理するマシンにあります。Firefox のスムーズスクロールオプションを確認します ( ツール -> オプション -> 詳細設定 -> 一般 -> スムーズスクロールの使用 ）。チェックが入っていない場合はそれが原因かもしれません...

私はScrollToを使用している同様の効果を試みてきた時はいつでも。多分その意志のヘルプ

ScrollToプラグインする

私はFF 3.5と同じ問題を持っていた - 間違いなく、レンダリングの問題のように見えます。あなたが3.6新しいことをしようとした場合、それはおそらく大丈夫でしょう。

私はドハーティのコーダスライダーところで2.0で問題を抱えていた。

よろしく

アンドレイ

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

Firefox のウィンドウ スクロールの jQuery イージング アニメーション (バグか私の悪さ?)

Firefox のウィンドウスクロールの jQuery イージングアニメーション (バグか私の悪さ?)