例
何よりもまず、私のコードと問題は次のとおりです。http:
//www.nathanstpierre.com/MBX/showoff.html
問題
だから私が見ているのは、左側のボタンをクリックすると、ウィンドウが適切な見出しにスクロールするということです。Firefox以外のすべてのブラウザ(... IE gaspを含む)では、これは非常にスムーズです。ただし、ウィンドウの高さを低くすると、すべてのコンピューターでスムーズになります。私はすでに複数のコンピューターとIE7-8、Google Chrome、Safari、Firefox3.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;
});
ロジック
sidenavonClickの各タグにイベントリスナーを追加します。これにより、そのリンクのhref属性と同じIDを持つドキュメント内の要素のoffset()。topが取得され、現在のscrollTopからその要素のoffset()。topにアニメーション化されます。ロジックはしっかりしていて、Firefoxを除くすべてのブラウザでスムーズに動作します...私が知る限りです。
罪状認否
私は何が間違っているのですか?これはバグですか?
ありがとう!
更新
良心的にここに提示された答えのいずれかを選択することはできません。それらのどれも実際に問題の解決策を与えていないので、これをフォローしている場合は、お気に入りを選んでください。賞金は最も高いものに行きます。投票。
この問題は、Firefoxがa)透明度をレンダリングし、b)スクロールイベントを処理する方法にあるようです。十分なプロセッサパワーがあれば、これは問題にならない可能性がありますが、私を悲しませているのは、IE(すべてのブラウザの)が劣ったハードウェアでこれをうまくレンダリングできることです。私はこの問題についてMozillaにアプローチし、彼らがそれについて何か言うことがあるかどうかを確認します。
追加の教育のために、以下が無料で提供されます。
編集:それで質問は答えられました、しかし今私はそれを選ぶことができません。誰もがそれで何が起こっているのか知っていますか?
最終更新 彼らが私に恩恵を取り戻すのに十分な時間が経過したので、私は正しい答えを選びました。ボックスシャドウやその他のいくつかの効果により、Firefoxでのレンダリング方法が原因でスクロールの問題が発生するようです。FF 4.0 +はこれをより適切に処理しますが、一部のコンピューターにはまだ問題があります。これは、CSS3を実装している人々にとって素晴らしい注意点です。すべてのブラウザーで相互作用をテストし、パフォーマンスコストが正当であるかどうかを確認してください。