jQuery لتخفيف الرسوم المتحركة لتمرير النافذة في Firefox (خطأ أم سيء؟)

Question

المثال
أولاً وقبل كل شيء، إليك الكود والمشكلة:
http://www.nathanstpierre.com/MBX/showoff.html

المشكلة
إذن ما أراه هو أنه عندما تنقر على الأزرار الموجودة على اليسار، تنتقل النافذة إلى العنوان المناسب.في كل متصفح باستثناء Firefox (بما في ذلك...أي اللحظات) هذا سلس للغاية.ومع ذلك، إذا قمت بتقليل ارتفاع النافذة، فإنها تصبح سلسة على جميع أجهزة الكمبيوتر.لقد قمت بالفعل بتجربة ذلك على أجهزة كمبيوتر متعددة وعلى IE 7-8 وGoogle Chrome وSafari وFirefox 3.5.لقد قمت بإزالة كل جزء من الرسوم والألوان الموجودة على الصفحة، لذلك ليست هذه هي المشكلة.لقد تخلصت من الشريط الجانبي الذي يتبعك، هذا ليس كل شيء.

النظرية
أعتقد أن البرنامج المساعد jQuery easing يحسب المسافة التي تحتاج إلى قطعها، ثم يقسم عدد البكسلات التي تحتاج إلى التحرك لكل وحدة من المدة المحددة (على سبيل المثال، 300 بكسل على 30 مللي ثانية، أي 10 بكسل/ مللي ثانية).يبدو أن كل متصفح آخر قادر على جعل هذا الانتقال سلسًا، ولكن ربما لا يتم ضغط التفاصيل التي يوفرها حدث تمرير النافذة بدرجة كافية حتى يتمكن 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;
      });

المنطق

أضف مستمعًا للحدث إلى كل علامة في شريط التنقل الجانبي عند النقر.سيؤدي هذا إلى الحصول على offset().top للعنصر الموجود في المستند بنفس المعرف مثل سمة href لهذا الارتباط، ثم يتم تحريكه من التمرير إلى الأعلى الحالي إلى offset().top لذلك العنصر.المنطق سليم ويعمل بسلاسة في كل متصفح باستثناء Firefox...بقدر ما أستطيع أن أقول.

النداء

ما الخطأ الذي افعله؟هذا الخلل؟

شكرًا!

التحديث

حسنًا، لا يمكنني بضمير حي اختيار أي من الإجابات المقدمة هنا، حيث لم يقدم أي منهم حلًا فعليًا لهذه المشكلة، لذلك إذا كنت تتابع هذا، فاختر مفضلتك وستذهب المكافأة إلى صاحب أعلى الأصوات.

يبدو أن المشكلة تكمن في الطريقة التي يعرض بها Firefox أ) الشفافية و ب) يتعامل مع أحداث التمرير.من المحتمل أن تكون هذه مشكلة مع قوة المعالج الكافية، ولكن ما يجعلني حزينًا هو أن IE (من جميع المتصفحات) قادر على تقديم هذا بشكل جيد على الأجهزة الرديئة.سأتواصل مع Mozilla بشأن هذه المشكلة وأرى ما إذا كان لديهم أي شيء ليقولوه عنها.

لمزيد من التنوير، يتم توفير ما يلي مجانًا:

مع الشفافية
بدون شفافية

يحرر:لقد تمت الإجابة على السؤال، لكن الآن لا يمكنني اختياره.هل يعرف أحد ما الأمر في ذلك؟

التحديث النهائيلقد مر وقت كافي حتى سمحوا لي باستعادة المكافأة، لذلك اخترت الإجابة الصحيحة.يبدو أن مربع الظل وبعض التأثيرات الأخرى تسبب بعض مشكلات التمرير في فايرفوكس بسبب طريقة عرضها.يتعامل FF 4.0 + مع هذا الأمر بشكل أفضل، لكن لا تزال بعض أجهزة الكمبيوتر تواجه مشكلات.يعد هذا تنبيهًا رائعًا للأشخاص الذين يقومون بتطبيق CSS3:اختبار التفاعل على جميع المتصفحات ومعرفة ما إذا كانت تكاليف الأداء مبررة.

Answer 1

يبدو أن الأداء الضعيف ناجم عن -moz-box-shadow الخاصية، إذا قمت بإزالة أي إعلانات لهذه الخاصية (أو قمت بتعطيلها باستخدام Firebug)، فإن الرسوم المتحركة التمريرية ستكون أكثر سلاسة.

Answer 2

يرجى تجربة jQuery 1.4.يبدو أن هذا أسرع بكثير من jQuery 1.3.2.

إذا كنت بحاجة إلى تصحيح هذا النوع من الأشياء، فضع ملفات js غير المضغوطة في التعليمات البرمجية الخاصة بك واستخدم Firebug مع ملفه الشخصي، لتعريف الوظائف.

Answer 3

صفحتك ثقيلة بعض الشيء بالخلفيتين (إحداهما شفافة بتنسيق .png ..)

تكمن المشكلة في متصفح Firefox و/أو في تعاملك مع الرسوم المتحركة.تحقق من خيار التمرير السلس في Firefox ( أدوات -> خيارات -> خيارات متقدمة -> عام -> استخدم التمرير السلس ).وقد يكون السبب إذا تم إيقافه..

Answer 4

كلما حاولت الحصول على تأثير مماثل، استخدمت ScrollTo.ربما هذا سوف يساعد

انتقل إلى البرنامج المساعد

Answer 5

لقد واجهت نفس المشكلة مع FF 3.5 - تبدو بالتأكيد مشكلة في العرض.إذا جربته 3.6 الجديد فمن المحتمل أن يكون على ما يرام.

كنت أواجه مشكلات مع شريط تمرير كودا دوهرتي 2.0 راجع للشغل.

يعتبر

أندريه