Freaking Firefox. كان الكثير من الألم في هذا المشروع مثل IE. هل تستخدم 3.0.1؟ هناك فئات تدور جديدة خاصة بـ Mozilla للمساعدة في هذه المشكلة. إذا استمر حدوث ذلك ، فيرجى إبلاغي بذلك وسأعيد فتحه.

يمكنني أن أؤكد أنني أستخدم 3.0.1 ، حتى أنني قمت بإعادة التنزيل والتحقق مرة أخرى واستمرت المشكلة.

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

لدي اهتزاز / تذبذب عند استخدام .icon-spin على Chromium (24.0.1312.56) و Chrome على Linux ، ويبدو Firefox (18.0.2) جيدًا. تم الاختبار على 13d5dd373cbf3f2bddd8ac2ee8df3a1966a62d09

أتلقى اهتزازًا / تذبذبًا على Firefox 18.0.2 ولكن ليس في Chrome أو IE في ظروف معينة. لم أتمكن من تحديد السبب الدقيق مع ذلك. (باستخدام Font-awesome v3.0.2)

أنا أتذبذب على جميع المتصفحات تحت Windows 7 ، لكنه شيء جميل تحت OSX.

تضمين التغريدة

أرى تذبذبًا في إصدار Chrome 26.0.1410.65 (إصدار حديث إلى حد ما). أي عمل على هذا؟

بينغ! أواجه المشكلة أيضًا. لا ترى سبب إغلاق المشكلة ، لأنها لا تزال قائمة.

هل يمكنك تقديم كمان يشرح المشكلة؟

نفس المشكلة هنا ، أي حلول؟

تم التأكيد لأحدث إصدار من Chrome (28.0.1500.71). كلما كانت الأيقونة أصغر ، كانت الحركة مبالغة فيها. تؤثر هذه المشكلة على فئة تدوير الأيقونة في أي مكان يتم استدعاءه.

حاولت الاستدارة ثلاثية الأبعاد دون أي نجاح. يعد تدوير icon-circle نفسه مشكلة.

ضمن Windows 7 ، أواجه مشكلة في Firefox 22.0 و Chrome 28.0.1500.72. IE 8-10 ، التذبذب بالكاد مرئي ، لكن بالنظر عن كثب إلى الحالة التي كنت أراقب فيها المشكلة ، أعتقد أنه لا يزال هناك تذبذب بسيط. سأبذل قصارى جهدي لإعداد كمان لهذه المشكلة ، ولكن هناك سياق كافٍ قد يستغرق بعض الوقت.

ليس jsfiddle الخاص بي ، ولكن هذا واحد مع المشكلة: http://jsfiddle.net/Rnt9N/2/
تبدو رائعة على نظام Mac ولكنها متوترة على Firefox تحت Windows 7.

إنه ليس سيئًا للغاية بالنسبة لي (Firefox 22 / w7 x64).

لدي نفس المشكلة باستخدام node-webkit v0.7.5.
انتهى الأمر باستخدام spin.js

إعادة فتح هذا لأنه أيضًا خطأ FontAwesome

يقترح إجراء .fa-spin { -webkit-filter: blur(0); } مثل هذه التغريدة إصلاحها بالنسبة لي.

paldepind شكرا لتقاسم هذا الحل

هل يمكنك تقديم كمان يوضح الدوران الحالي والدوران المقترح جنبًا إلى جنب؟

يمكنك تفرع هذا الكمان: http://jsfiddle.net/tagliala/HgYqA/

لا أرى اختلافات في التذبذب مع Chrome على Windows 7. ألاحظ فقط أن الرمز يدور "أبطأ" ، مثل معدل نصف إطار في الثانية

tagliala على الرحب والسعة!

إليك كمانًا يُظهر قرصين ، أحدهما به والآخر بدون الإصلاح: http://jsfiddle.net/paldepind/XLdQX/

لقد اختبرت مع Chrome 30 و Firefox 24 على Linux. في Firefox ، يكون كل شيء سلسًا ولكن في Chrome يكون القرص الدوار بدون الإصلاح متذبذبًا بعض الشيء. لا أرى أي اختلاف في سرعة التدوير في أي من المتصفحات.

لا يعرض Chrome 32 على Windows 7 الرمز على الإطلاق ...

في GNU / Linux ، مع Chromium 30 ، الإصلاح يعمل. ليس هو نفسه بالنسبة إلى Firefox 26 ، لأن خاصية التصفية غير مدعومة حتى الآن. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

بالنسبة إلى Firefox 26 على Windows 8 ، لا يزال كلاهما متذبذبًا بالنسبة لي. في Chrome 31 على Windows 8 ، يبدو كلاهما جيدًا.
في 12 كانون الأول (ديسمبر) 2013 ، الساعة 2:20 مساءً ، كتب فيليبي بيناييلو إخطارات github.com:

في GNU / Linux ، مع Chromium 30 ، الإصلاح يعمل. ليس هو نفسه بالنسبة إلى Firefox 26 ، لأن خاصية التصفية غير مدعومة حتى الآن. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

-
قم بالرد على هذا البريد الإلكتروني مباشرةً أو قم بعرضه على GitHub.

لسوء الحظ ، لا يظهر على النوافذ ويمتص OSX :(

http://jsfiddle.net/tagliala/XLdQX/2/

رمز الدوران غير متحيز ويستمر في التذبذب

كنت آمل أن يكون هذا حلاً قابلاً للتطبيق ولكنه ليس كذلك

tagliala هذا مؤسف. لقد جربت فقط الإصلاح على جهازي مع Linux مع نتائج رائعة.

paldepind ، أعلم أنني أتذكر أنه على آلة ubuntu الخاصة بي ، تمتص مادة الغزل حقًا

هل يمكنك محاولة إجراء تحويلات البكسل الفرعي: http://jsfiddle.net/tagliala/96ULe/3/

مرحبا! لقد قمت بالتحديث إلى Chrome 31 اليوم والآن اختفى التذبذب. لذلك ربما تختفي هذه المشكلة من تلقاء نفسها.

tagliala لست متأكدًا مما يفترض أن أراه. كل شيء يبدو كما ينبغي على ما أعتقد. ولكن مرة أخرى هذا في Chrome 31 حيث لا أرى مشكلة التذبذب بعد الآن.

tagliala لا يزال كمان تحويلات البكسل الفرعي يُظهر تذبذبًا على Chrome 31 و Firefox 26 في Kubuntu.

ومع ذلك ، أوافق على أن هذا ناتج عن عرض البكسل الفرعي.

إليك كمانًا جديدًا يُظهر حرف التدوير O ("أوه") مع إطار أحمر دائري حوله.

http://jsfiddle.net/bBaVN/208/

يؤدي هذا المثال بالفعل إلى تفاقم التأثير المتذبذب ، لأن الحد الأحمر يدور بسلاسة ، بينما يتذبذب O.

-webkit-filter: blur(0); يحل المشكلة بالنسبة لي. لا يمكنني العثور على أي توجيهات أخرى لإصلاحه ، بما في ذلك --webkit-font-smoothing.

حاولت أيضًا تعطيل التنعيم الخطي لـ KDE (إعدادات النظام -> مظهر التطبيق -> الخطوط -> استخدام anti-aliasing = معطل) ، وهذا أيضًا يعمل على إصلاح المشكلة.

للأسف -webkit-filter: blur(0); ليس حلاً لأنه يكسر النوافذ

tagliala لست متأكدًا من إصدار Windows الذي لا يعمل فيه. لقد اختبرت الحل المقترح في أحدث إصدار من Chrome و IE 11. لا يبدو أنه يعمل مع Firefox.

Silentworks يكسر Win7 إلى x64 - الكروم 32

http://jsfiddle.net/tagliala/XLdQX/2/

علاوة على ذلك ، عندما تنجح ، فهي سيئة التحيز حقًا.

أعتقد أن المشكلة الرئيسية هي أن الرموز داخل الخطوط لا تتمركز بشكل مثالي: http://jsfiddle.net/XLdQX/5/

كما ترى في لقطة الشاشة أدناه ، هناك 3 بكسلات فارغة أدناه و 2 أعلاه: سيؤدي ذلك إلى التذبذب.

إذا كنت قادرًا على ضبط العرض بطريقة يتم توسيط الرمز ، فلن يتأرجح الرمز: http://jsfiddle.net/XLdQX/6/

يجب إزالة ميزة الغزل هذه IMHO ، فهي تسبب مشاكل أكثر من الفوائد

WONTFIX لأن الكثير من العمل: -1:
لكن نعم ، كان أنيقًا ... لكن ليس ضروريًا. إعادة جميع الخطوط لجعل بعض الأيقونات تدور كثيرًا من العمل وتتعارض مع التيار.

conrado لا توجد تسمية "wontfix" هنا

لا يزال wontfix. ربما يمكن إعادة عمل بعض الصور الرمزية المناسبة للدوران

لا يزال wontfix.

لا ليس كذلك. تم فتحه بشكل صحيح ووصفه بأنه خطأ

لست متأكدًا حقًا من حالة هذه المشكلة ، حتى بعد قراءة التعليقات ، ولكن نظرًا لأنها لا تزال مفتوحة: لا يزال Chromium 31 و Firefox Aurora 28 (2014-1-13) على Xubuntu يعانيان من الاهتزازات.

@ ahamilton9 ألق نظرة هنا: https://github.com/FortAwesome/Font-Awesome/issues/2709#issuecomment -32045585

حسنًا ، أعتقد أنه خطأ في المتصفح في كل خط.
هناك ثلاثة أمثلة: http://jsfiddle.net/3T8Kz/

أولاً: تم توسيط خط Font-Awesome ، مع الخطأ.
ثانيًا: مثال آخر ولكن بخط عادي
ثالثًا: بدون خطوط ، فقط div ، بنفس الرسوم المتحركة وبدون أخطاء.

نفس الخطأ بالنسبة لي هو Firefox 31 ، Linux.
إذا كان هذا بسبب حجم الحروف الرسومية - فهذا يكفي لإصلاح الحروف الرسومية المخصصة للدوران ، وليس جميعها.

: +1: +1 هذا يجب أن يؤخذ في الاعتبار للإصدار الرئيسي التالي ، حيث من المفترض أن يتم إعادة النظر في جميع الحروف الرسومية.

رؤية هذه المشكلة حتى على الموقع الرسمي: http://i.gyazo.com/3ba2d0afad90c2e7fe6d2c0bb34e661d.mp4

(أحدث إصدار من Firefox)

أحب أن أرى هذا وقد تم إصلاحه: +1:

نرحب بطلبات السحب والتحقيقات العميقة في هذا الشأن

يبدو أن هذا خطأ الكروم

davegandy أي تحديث؟

تضمين التغريدة

https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -53544936

نفس الشيء على Chrome 37.0.2062.124 على نظام التشغيل Mac OS X و Safari على iOS 7.0.4

+1

لقد تمكنت من معالجة هذه المشكلة (لن أقول حلها) من أجل تحديث fa في مشروع محلي باستخدام
أصل محولات الويب: 49٪ 48.5٪ ؛
-موز-تحويل-أصل: 49٪ 48.5٪ ؛
- تحويل - أصل - 49٪ 48.5٪ ؛
-أصل تحويل: 49٪ 48.5٪ ؛
أصل التحويل: 49٪ 48.5٪ ؛

أنا أستخدم "fa-Circle-o-notch" كرمز تحميل واستخدم هذه القيم لتحويل الأصل حتى لا يتذبذب

.fa-Circle-o-notch.fa-spin {
أصل محولات الويب: 50٪ 48.9٪ ؛
-موز-تحويل-أصل: 50٪ 48.9٪ ؛
- تحويل - أصل - 50٪ 48.9٪ ؛
-أصل تحويل: 50٪ 48.9٪ ؛
أصل التحويل: 50٪ 48.9٪ ؛
}

magnyld لقد حاولت ذلك للتو ، لكنني لا تزال تتأرجح بعد تغييرات DOM.

لا يمكنك الاعتماد على تحويل الأصول. قد ينكسر هذا إذا كان الرمز أكبر أو أصغر. كما قلت من قبل ، هذه ليست مشكلة رائعة للخط ، لأنه إذا حاولت تدوير div على شكل دائرة مثالية ، فإن النتيجة هي نفسها. أراهن أن هذا خطأ محرك webkit.

كلا ، هذا موجود في Firefox أيضًا https://bugzilla.mozilla.org/show_bug.cgi؟id=930079

التذبذب في Firefox 33 ، OSX.

نفس المشكلة هنا ( الدوران المتذبذب ) :(

طلبات السحب مع تحليل عميق لهذه المشكلة ، وحل بديل وشرح مناسب للمزايا والعيوب سيكون موضع ترحيب كبير.

يبدو أن المشكلة تأتي من الأيقونة نفسها. إذا كنت تأخذ إصدار Icomoon spinner ، فلن يتأرجح على الإطلاق. إنه يعمل بشكل جيد على Chrome 39 و Windows و IE11 و Windows. لا أعرف عن المتصفحات الأخرى.

http://jsfiddle.net/cxxzh0uf/

skoub

نهج icomoon للاحتفاظ بالرموز بنفس الحجم يبدو أفضل لهذا الغرض ولكنه ليس كافيًا.

http://jsfiddle.net/tagliala/cxxzh0uf/2/

إذا قمت بفحص العنصر الزائف :before ، فقد لاحظت أن الخط الرائع "غريب"

حاولت ضبط نفس العرض والارتفاع لكن الأمور لم تتحسن.

أعتقد أن هذا مرتبط بالخط نفسه ولا يوجد شيء يمكننا القيام به عبر CSS.

يجب على Dave إلقاء نظرة على الخط وفحص الخطوط التي تم إنشاؤها بواسطة Icomoon لمحاولة فهم أفضل طريقة لإصلاح هذه المشكلة.

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

آسف على لغتي الإنجليزية ، لقد تأخر أيضًا هنا :)

tagliala شكرًا لربط مشكلة fa-clock-o هنا أيضًا ، إنها نفس المشكلة التي ذكرها الباقي.
لقد لاحظت أن fa-cog لديه نفس المشكلة ، لكنه ليس ملحوظًا في نفس الظروف مثل fa-clock أو بعض المشكلات الأخرى المذكورة أعلاه. سأستمر في مشاهدة هذا الموضوع وسأبلغ إذا وجدت أي حلول بديلة ، لكنني مقتنع تمامًا بأن العيوب الصغيرة في الصور الرمزية نفسها تظهر مرة واحدة فقط بالتناوب ، وإلا فإنها صغيرة جدًا بحيث لا يمكن ملاحظتها بالعين المجردة

لقد واجهت نفس المشكلة ، هل هناك حل مؤكد لذلك؟

TsuiJie لا ، لا يوجد

واجهت مشكلة مماثلة مع أيقونات الاهتزاز / الاهتزاز في IE10 و 11.

كانت مشكلتي أنه في IE 10/11 كانت أشرطة التمرير تظهر وتختبئ (نابضة) طالما أن القرص الدوار كان مرئيًا.

ما وجدته هو أنه من خلال ضبط ارتفاع وعرض علامة الرمز على حجم معين (نفس حجم الرمز نفسه) ، توقف النبض.

أتمنى أن يساعد شخص ما.
في صحتك

حسنًا ، لقد اكتشفت أن المشكلة تكمن في تحويل Font Squirrel إلى تنسيقات خطوط الويب. يبدو أنه يستغل بعض المقاييس. خطتي:

• اختبار مع نسخة جديدة من Font Squirrel
• إذا لم يفلح ذلك ، فقم بلف حل التحويل الخاص بي

حسنًا ، بعد قدر كبير من التحقيق ، أدخلت بعض الإصلاحات:

• تم تحديث fa-spinner للحصول على تأثير بصري أفضل عند الدوران.
• الصفحة الرئيسية المتداول تحويل خط الويب. كان Font Squirrel بالتأكيد يعبث بالأشياء.
• تم تعديل بعض مقاييس الخط التي يبدو أنها ليس لها أي تأثير على نظام Mac ، ولكنها مستخدمة بكثرة بواسطة النوافذ.
• تمت إضافة أمثلة متحركة إلى صفحة الاختبار المرئي (http://fontawesome.io/test/).

نتائج

• Retina Mac: لا تشوبه شائبة في Chrome و Safari و Firefox
• Mac غير الشبكي: أفضل بكثير في Chrome و Safari و Firefox
• Windows 7: يبدو IE11 لا تشوبه شائبة ، ولا يزال Chrome 39 يواجه مشكلات ، لكنني لا أعتقد أنه أسوأ مما كان عليه

تحذير واحد

• في بعض أحجام الخطوط ، هناك بعض التذبذب في جميع المتصفحات (Icomoon لديه نفس المشكلة). بشكل أساسي ، إذا احتفظت بالمضاعفات ونصف المضاعفات للدقة المحسّنة (على سبيل المثال 14 بكسل ، 21 بكسل ، 28 بكسل ، 35 بكسل) ، فإن التذبذب يختفي.

نظرًا لأن النتائج أفضل بكثير مما كانت عليه ، فسوف أسمي هذا مقبولاً لـ 4.3 ، وأبقي المشكلة مفتوحة حتى 5.0.

تحديث آخر. لقد اكتشفت الخيار المحدد الذي لم يكن يعمل بشكل جيد لتحويل Font Squirrel. لذا أعدت تلك الملفات مرة أخرى. تركت مفتوحة.

davegandy ، لا أرى أي تحسن من جانبي مع Firefox & Chrome على Windows. لم أحاول IE11. يمكنك رؤية التذبذب بوضوح إذا استخدمت الخطوات في الرسم المتحرك.

أدرك أنه لا يمكنك فعل الكثير في الفرع 4.x ولكن هل هناك أي حل قوي لفرع 5.x؟

.fa-spin2 {
    animation: fa-spin 1s infinite steps(8);
    -webkit-animation: fa-spin 1s infinite steps(8);
    -moz-animation: fa-spin 1s infinite steps(8);
    -o-animation: fa-spin 1s infinite steps(8);
}

لأي شخص آخر وصل إلى هذا الحد ، ويبحث عن بعض استكشاف الأخطاء وإصلاحها:

لا تستخدم fa-spin و fa-fw معًا.

تبين أن هذه هي مشكلتي (وحلها).

skoub

IE11 مثالي تقريبًا ، IMHO هو الأفضل في Windows.

أيقونة الدوار جديدة ويجب أن تكون أفضل من ذي قبل.

ألق نظرة على الجزء السفلي من هذه الصفحة الثقيلة بجميع المتصفحات: http://fontawesome.io/test/

يعد Chrome و Firefox سيئين حقًا بأحجام صغيرة: محبط:

مع IE11 ، مع fa-pulse ، هناك خلل بسيط. يبدو الأمر كما لو أن القرص الدوار يتحرك بمقدار 1 بكسل لأعلى وينزل لأسفل في خطوة الرسوم المتحركة التالية.

إنه يعمل بالنسبة لي على IE 11 و Chrome 40.0.2214.115 m ولكنه يتذبذب في Firefox 35.0.1.

لا يزال ملحوظًا في Firefox 36 لنظام التشغيل Linux.

تم تسجيل الفيديو بمعدل 50 إطارًا في الثانية.

تؤدي إضافة scaleZ(1.001) إصلاح مشكلة Firefox 36 على Linux.

لست متأكدًا مما إذا كانت مشكلتي هي نفسها مشكلة الجميع ، فقد بدا أنها أشبه بالمشكلة رقم 4017 ، ولكن تم إغلاقها وإعادة توجيهها هنا ، لذلك سأقوم بنشر الحل هنا.

يبدو أنك ببساطة تضيف ما يلي إلى فئة .fa-spin.

.fa-spin {
    text-align:center;
}

يبدو أنه يصلح التذبذب بالنسبة لي.

لا يتم تجنب fa- FixqJake ولا text- align: centerJakeCooper يصلحه لي:

(بدون fa-spin ، لا يوجد اضطراب).

isaksky ، هل يمكنك تقديم كمان يوضح هذه المشكلة؟ لدي فكرة

tagliala هنا تذهب:

http://codepen.io/isaksky/pen/JoBqoM

Chrome 40.0.2214.115 ، Windows 7. لا يمكن إعادة إظهار هذه المشكلة على رمز الشفرة المقدم.

أي متصفح يعطيك هذا الناتج؟

أنا لست على جهاز كمبيوتر عملي حاليًا ، لكنني أعتقد أنه أحدث إصدار عادي من Chrome على Windows 8. لا يمكنني عادةً إعادة إنتاجه هنا على جهاز Mac هذا في Chrome ، ولكن إذا قمت بالتكبير إلى 110٪ أو 125٪ من أجل على سبيل المثال ، يظهر. (هناك أيضًا مشكلة حيث تتكدس الأزرار بشكل عمودي ، لكن هذه ليست المشكلة التي أعنيها (أعتقد أنه يمكنني إصلاح ذلك باستخدام ems).). هل يحدث الارتعاش بالنسبة لك إذا عبثت بالتكبير / التصغير؟

لقد حصلت للتو على التكبير العادي (100٪) على جهاز Mac هذا أيضًا. يبدو مرتبطًا بالعبث بالتكبير و / أو تبديل علامات تبويب المتصفح. بالمناسبة ، تحدث المشكلة أيضًا مع $('#spin-pls').toggleClass("fa-spin") ، (بدلاً من تبديل "الإخفاء" عند الدوران بالفعل) مما قد يجعل الأمر أكثر وضوحًا حول مكان المشكلة.

سوف تحقق غدا مع جهاز Mac الخاص بي

لدي حل هنا لتدوير الترس. لطيفة وسلسة عندما تحوم.

http://codepen.io/jesseangelo/pen/KwrqdM؟editors=010

لقد صنعت رسمًا متحركًا للإطار الرئيسي يدور 30 ​​درجة فقط (أقل من rotateFa ). ثم أسمي هذا مثل animation: rotateFa .1s infinite;

<strong i="11">@keyframes</strong> rotateFa {
    from { transform: rotate(0deg); }
    to { transform: rotate(30deg); }
}

والعكس عكس ذلك

<strong i="15">@keyframes</strong> unRotateFa {
  from { transform: rotate(30deg); }
  to { transform: rotate(0deg); }
}

لا تزال المشكلة قائمة.

لا يزال موجودًا في حالة تعطيل تسريع الأجهزة. Firefox 36.0.4.

يُرجى عدم إجراء 1+ أو تأكيد استمرار وجود هذه المشكلة ، لأن المشكلة مفتوحة ولأننا لا نعرف كيفية حلها.

يرجى إلقاء نظرة هنا: https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -65381998

ربما تكون فكرة جيدة أن تضع رأسًا على صفحة الأمثلة ؟ المشكلة كبيرة بما يكفي بالنسبة لي لأكون حذرًا جدًا من الرموز المتحركة ، ولكن وفقًا لـ https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -71056820 ، لن تلاحظ على جهاز mac retina - حتى لو كنت قد اختبرت على جميع المتصفحات الرئيسية.

Vusys أوافق. يمكنك إرسال PR ضد الفرع الرئيسي أو إخباري بما أكتب وسأفعل ذلك

تم تنفيذ

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

Vusys شكرا!

أرى تذبذبًا أسوأ بكثير من مجرد +/- 1 بكسل. هناك بعض التفاعل الغريب بين تحويل الدوران وتحولات CSS الأخرى ، بحيث يكون مركز الدوران أحيانًا خارج رمز الدوران.

لم أقم بتسمية قاعدة CSS التي تسبب هذه المشكلة على موقعي حتى الآن ، لكنها تبدو وكأنها حالة أمر تحويل خاطئ. يجب أن يكون الترتيب: ترجم مركز الأيقونة إلى (0،0) ، ثم قم بالتدوير بالزاوية الحالية ، ثم قم بترجمة (0،0) إلى موضع الشاشة حيث سيتم عرض رمز المركز (أو العكس). في مكان ما هناك ، تقوم CSS بإلقاء ترجمة أخرى في المزيج.

_تحديث: _ اكتشفت ما كانت المشكلة في حالتي ، لذلك سأقوم بنشر الإجابة هنا في حالة استفادة أي شخص آخر من هذا: كان لدي قاعدة CSS كانت تغير عرض العنصر "i" الذي يدور حوله تم تخزينه في (عنصر Bootstrap المستخدم لأيقونات FA). يؤدي القيام بذلك إلى نتائج غير متوقعة اعتمادًا على سياق الرمز (على سبيل المثال ، اعتمادًا على ما إذا كان النص مركزًا أم لا).

لم أقم بتسمية أي قاعدة CSS

أنا واثق تمامًا من أنها ليست قاعدة css وأن المشكلة لا تتعلق بالاتحاد نفسه

ألق نظرة هنا: http://jsfiddle.net/tagliala/g0ngLhyr/

tagliala ، إذا لم تكن مرتبطة بقاعدة css أو FA ، كيف تشرح أن Icomoon ليس له تأثير التذبذب؟

عرض: http://jsfiddle.net/cxxzh0uf/

مثال آخر هو المثال الذي قدمته google: http://www.getmdl.io/components/index.html#loading -section / spinner

skoub الخاص بك كمان محدث إلى 4.3.0: http://jsfiddle.net/tagliala/cxxzh0uf/9/

ألق نظرة هنا: http://jsfiddle.net/tagliala/g0ngLhyr/

لاحظ أن هذا الكمان لا يحتوي على خطوط ويب على الإطلاق ولا يزال يُظهر التذبذب

لا يعتمد تطبيق skoub google على خطوط الويب و IMHO فهذه هي الطريقة الصحيحة للتعامل مع هذه الميزة.

أود أن أشارك تجربتي هنا.

أيقونات فردية:
لدي مشكلة في التذبذب مع الرموز المكدسة فقط. أيقونات مفردة تدور أو تنبض على ما يرام

الرموز المكدسة:
من الواضح أن الكود أدناه على موقعي لا يتمايل في العنوان الذي يكون فيه الخط أكبر قليلاً ، ولكنه يتمايل عندما يكون الخط أصغر. يتذبذب نبض fa في كلتا الحالتين

إخلاء المسؤولية: أنا جديد جدًا على كل هذه الأشياء ، ولكن نظرًا لأن موقعي ينتج نتائج متذبذبة وجيدة ، أعتقد أنكم جميعًا قد ترغبون في معرفتها.

isaksky يتعلق هذا التذبذب / التمويه مع الدوار بتسريع الأجهزة

العناصر التي يتم إظهارها / إخفاؤها في فئة .hide يمكن أن تجعل المتصفح مُلمحًا بأن المحتوى سيكون مخفيًا

#spin-pls {
  will-change: contents;
}

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

.job-order-dialog {
  will-change: transform;
}

يعمل ، ولكنه يؤثر سلبًا على Chrome عن طريق التعويض الزائد وطمس النص طوال الوقت. لقد توصلت إلى حلين محتملين ، الأول يستهدف Firefox فقط ، والثاني هو تسريع مختلف ، filter: blur(0); لوحظ في هذا الخطأ ولكنه اختراق قليل في رأيي - على غرار transform: translateZ(0); - - وقد يؤدي إلى نتائج سلبية في المستقبل.

@-moz-document url-prefix() {
  .job-order-dialog {
    will-change: transform;
  }
}

.job-order-dialog {
  filter: blur(0);
}

هذا يصلح المشكلة ، شكرا toastal ! هل يمكن عمل هذا في حل عام tagliala ؟

toastal هل تمانع في تقديم jsfiddle يعرض الحل الخاص بك ويقارن مع التدوير الأساسي لـ fontawesome؟

أحاول جميع الأمثلة التي نشرتها يا رفاق ، ولا يمكنني إعادة إنتاجها في Firefox Aurora:

20150722004007
Mozilla / 5.0 (X11؛ Linux x86_64؛ rv: 41.0) Gecko / 20100101 Firefox / 41.0

أنا في debian Jessie ، وبسبب بعض مشكلات برنامج تشغيل nvidia ، أعتقد أنه ليس لدي تسريع في الأجهزة.

فشلت عملية GLXtest (تم الخروج بالحالة 1): ملحق GLX مفقود
Procesador WebGL Bloqueado para tu tarjeta gráfica debido a problemas no resueltos del controlador.

أيضًا ، لا يمكن التكاثر هنا:
http://shb.github.io/bootstrap-loading-screen/#icon : الدوار

هل تم حلها أم بسبب عدم تمكين تسريع الأجهزة؟

لقد عثرت على حل محتمل آخر لهذه المشكلة (تشغيل Firefox 39) بفضل هذه المشاركة: http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css -تحويلات /

لقد قمت بتحرير JSFiddle أعلاه مع الإصلاح: http://jsfiddle.net/5z9om45L/

فقط ضع "منظور (1 بكسل)" في خاصية التحويل. هذا "يلقي عرض الكائن على GPU" ، وفقًا للمنشور المرتبط أعلاه. لم أختبر هذا شخصيًا على نطاق واسع ، لذا لا أعرف ما الذي يفعله هذا تحديدًا أو ما إذا كان يتسبب في أي مشكلات أخرى ، ولكن حتى الآن يبدو الأمر جيدًا. لقد كانت هذه إحدى أكبر مشكلاتي مع Firefox ، لذلك اعتقدت أنني سأذكرها هنا.

لقد قمت بتحرير JSFiddle أعلاه مع الإصلاح: http://jsfiddle.net/5z9om45L/

إنه يصلح المشكلة بشكل جيد بالنسبة لي.

هنا كمان محدث يظهر التذبذب على البوصلة. يُظهر زر تحديد الموقع الثاني حركة دوران بسيطة مع اهتزاز واضح.

http://jsfiddle.net/Lpur9ek1/1/

spiderr على ما يبدو ، fa-lg من تأثير التذبذب لأنه يتعامل مع ارتفاع الخط وحجم الخط. حاول استخدام حجم خط 14 بكسل أو مضاعفاته

tagliala شكرا ، نصيحة عظيمة! fa-2x أفضل بالتأكيد. هناك أيضًا بعض القطع الأثرية الغريبة (وحدات البكسل القذرة) حول الدائرة. إليك كمان في fa-5X يوضحها بشكل أكثر وضوحًا على الزر الأزرق الكبير. هذه تفاصيل دقيقة ، ولكن إذا قام شخص ما بتنظيف البوصلة ، فسيكون ذلك رائعًا. آمل أنه عندما تدور البوصلة ، لا يمكنك معرفة أن الدائرة تتحرك ، فقط إبرة البوصلة الداخلية. إذا جلست على بعد مترين من الشاشة باستخدام fa-5x ، فستبدو رائعة :-)

http://jsfiddle.net/mhqLvw79/1/

لست متأكدًا مما إذا كان هذا هو الخيط الصحيح ، ولكن ..
في متصفح Firefox ، توقف "fa fa-cog fa-spin" عن الدوران. أنا استخدمه في مكالمة أجاكس مع مشروط. إنه يعمل بشكل جيد في Safari و Chrome لكن Firefox يتوقف لسبب ما. أي أفكار؟؟

app / javascripts / my_file.js
$ (document) .ready (function () {
$ ('# search_btn'). on ('click' ، الوظيفة () {
$ ('# results'). فارغ () ؛
var myForm = $ ('# user_search') ؛
$ ("# spinner_modal"). modal ("show")؛
.ajax $ ({
url: myForm.attr ('إجراء')،
اكتب: "POST" ،
البيانات: myForm.serialize () ،
نوع البيانات: "نص" ،
النجاح: الوظيفة (html) {
$ ("# spinner_modal"). مشروط ("إخفاء")؛
$ ('# results'). append (html)؛
} ،
خطأ: الوظيفة (xhr ، satus ، err) {
$ ("# spinner_modal"). مشروط ("إخفاء")؛
} ،
المهلة: 60000
}) ؛
عودة كاذبة؛
}) ؛

_my_partial.html.erb

jonathanparrish في ١١ أغسطس ٢٠١٥