Firefox yang menakutkan. Sudah banyak menyusahkan dalam proyek ini seperti IE. Apakah Anda menggunakan 3.0.1? Ada kelas spin khusus Mozilla baru untuk membantu masalah ini. Jika masih terjadi, beri tahu saya dan saya akan buka kembali.

Saya dapat mengonfirmasi bahwa saya menggunakan 3.0.1, saya bahkan mengunduh ulang dan memeriksa ulang dan masalah tetap ada.

Dalam komentar saya sebelumnya, sepertinya contoh saya dihilangkan, saya akan dengan senang hati mengirimkan template mako kepada Anda di mana masalah ini terjadi?

Saya mengalami goyangan / goyangan saat menggunakan .icon-spin di Chromium (24.0.1312.56) dan Chrome di Linux, Firefox (18.0.2) tampaknya baik-baik saja. Diuji pada 13d5dd373cbf3f2bddd8ac2ee8df3a1966a62d09

Saya mendapatkan goyangan / goyangan di firefox 18.0.2 tetapi tidak di Chrome atau IE dalam keadaan tertentu. Namun, saya belum bisa menentukan penyebab pastinya. (menggunakan font-awesome v3.0.2)

Saya goyah di semua browser di bawah Windows 7, tapi itu adalah keindahan di bawah OSX.

@tokopedia

Saya mendapatkan goyangan di Chrome Versi 26.0.1410.65 (versi yang cukup baru). Ada pekerjaan untuk ini?

ping! Saya juga mengalami masalah. Tidak melihat mengapa masalah ditutup, karena masih berlanjut.

dapatkah Anda memberikan penjelasan tentang masalah ini?

Masalah yang sama di sini, ada solusi?

Dikonfirmasi untuk versi terbaru Chrome (28.0.1500.71). Semakin kecil ikonnya, semakin berlebihan gerakannya. Masalah ini memengaruhi kelas ikon-spin di mana saja yang dipanggil.

Saya mencoba rotasi 3d tanpa hasil. Memutar icon-circle itu sendiri merupakan masalah.

Pada Windows 7, saya mengalami masalah di Firefox 22.0, Chrome 28.0.1500.72. IE 8-10 goyangannya hampir tidak terlihat, tetapi melihat dari dekat kasus di mana saya telah mengamati masalah tersebut, saya pikir masih ada sedikit goyangan. Saya akan melakukan yang terbaik untuk mengatur biola untuk masalah ini, tetapi ada cukup konteks sehingga mungkin perlu waktu.

Bukan jsfiddle saya, tapi ini salah satu yang bermasalah: http://jsfiddle.net/Rnt9N/2/
Tampak hebat di Mac tetapi gelisah di Firefox di bawah Windows 7.

itu tidak terlalu buruk untuk saya (firefox 22 / w7 x64).

Saya memiliki masalah yang sama menggunakan node-webkit v0.7.5.
Akhirnya menggunakan spin.js

membuka kembali yang ini karena itu juga kesalahan FontAwesome

Melakukan .fa-spin { -webkit-filter: blur(0); } seperti tweet ini menyarankan untuk memperbaikinya untuk saya.

@paldepind terima kasih telah membagikan solusi ini

Bisakah Anda memberikan biola yang menunjukkan putaran saat ini dan putaran yang diusulkan berdampingan?

Anda dapat membuat biola ini: http://jsfiddle.net/tagliala/HgYqA/

Saya tidak melihat perbedaan goyangan dengan Chrome di Windows 7. Saya hanya memperhatikan ikon berputar "lebih lambat", seperti pada kecepatan setengah fps

@tagliala sama- sama!

Berikut biola yang menunjukkan dua pemintal, satu dengan dan satu tanpa perbaikan: http://jsfiddle.net/paldepind/XLdQX/

Saya telah menguji dengan Chrome 30 dan Firefox 24 di Linux. Di Firefox semuanya lancar tetapi di Chrome pemintal tanpa perbaikan sedikit goyah. Saya tidak melihat perbedaan dalam kecepatan rotasi di browser mana pun.

Chrome 32 di Windows 7 tidak menampilkan ikon sama sekali ...

Di GNU / Linux, dengan Chromium 30 perbaikan berfungsi. Tidak sama untuk Firefox 26, karena properti filter belum didukung. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Untuk Firefox 26 di Windows 8, keduanya masih goyah bagi saya. Di Chrome 31 pada Windows 8, keduanya terlihat baik-baik saja.
Pada 12 Desember 2013, pukul 14:20, Felipe Peñailillo [email protected] menulis:

Di GNU / Linux, dengan Chromium 30 perbaikan berfungsi. Tidak sama untuk Firefox 26, karena properti filter belum didukung. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

-
Balas email ini secara langsung atau lihat di GitHub.

Sayangnya itu tidak muncul di windows dan menyebalkan di OSX :(

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

Ikon berputar tidak antialiased dan terus bergoyang

Saya berharap ini adalah solusi yang layak tetapi ternyata tidak

@tagliala Itu sangat disayangkan. Saya hanya mencoba memperbaiki mesin saya dengan Linux dengan hasil yang bagus.

@paldepind oh saya tahu saya ingat bahwa di mesin ubuntu saya, hal - hal yang berputar

Bisakah Anda mencoba transformasi subpiksel: http://jsfiddle.net/tagliala/96ULe/3/

Hai! Saya memperbarui ke Chrome 31 hari ini dan sekarang goyangannya telah hilang. Jadi mungkin masalah ini akan hilang dengan sendirinya.

@tagliala tidak yakin apa yang harus saya lihat. Semuanya terlihat seperti itu yang harus saya pikirkan. Tapi sekali lagi ini di Chrome 31 di mana saya tidak melihat masalah goyangan lagi.

@tagliala Biola transformasi subpiksel masih menunjukkan goyangan di Chrome 31 dan Firefox 26 di Kubuntu.

Namun, saya setuju bahwa ini disebabkan oleh rendering subpiksel.

Ini biola baru yang menunjukkan huruf rotasi O ("oh") dengan garis merah melingkar di sekelilingnya.

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

Contoh ini benar-benar memperburuk efek goyah, karena batas merah berputar dengan mulus, tetapi O bergoyang.

-webkit-filter: blur(0); memperbaiki masalah untuk saya. Saya tidak dapat menemukan arahan lain yang memperbaikinya, termasuk --webkit-font-smoothing.

Saya juga mencoba menonaktifkan font KDE anti-aliasing (Pengaturan Sistem -> Tampilan Aplikasi -> Font -> Gunakan anti-aliasing = Dinonaktifkan), dan _ini juga memperbaiki masalah_.

sayangnya -webkit-filter: blur(0); bukanlah solusi karena dapat merusak jendela

@tagliala tidak yakin versi Windows apa yang tidak berfungsi untuk Anda. Saya telah menguji solusi yang diusulkan di Chrome dan IE 11. Sepertinya tidak bekerja dengan Firefox.

@silentworks rusak Win7 x64 - chrome 32

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

Selain itu, ketika berhasil, itu benar-benar antialiased yang buruk.

Saya pikir masalah utamanya adalah ikon di dalam font tidak berada tepat di tengah: http://jsfiddle.net/XLdQX/5/

Seperti yang Anda lihat pada gambar di bawah, ada 3 piksel kosong di bawah dan 2 di atas: yang akan menyebabkan goyangan.

Jika Anda dapat mengatur lebar dengan cara ikon di tengah, ikon tidak akan goyah: http://jsfiddle.net/XLdQX/6/

IMHO fitur pemintalan ini harus dihilangkan, itu menyebabkan lebih banyak masalah daripada manfaat

PERBAIKAN WONT karena banyak pekerjaan: -1:
tapi ya, itu bagus ... tapi tidak perlu. Mengulangi semua font untuk membuat beberapa ikon berputar adalah pekerjaan yang banyak dan bertentangan dengan arus.

@conrado tidak ada label "wontfix" di sini

itu masih wontfix. mungkin beberapa gryph yang sesuai untuk putaran bisa dikerjakan ulang

itu masih wontfix.

Tidak, tidak. Ini dibuka dengan benar dan diberi label sebagai bug

Saya tidak begitu yakin status masalah ini, bahkan setelah membaca komentar, tetapi karena masih ditandai sebagai buka: Chromium 31 dan Firefox Aurora 28 (2014-1-13) di Xubuntu masih bergetar.

@ ahamilton9 lihat di sini: https://github.com/FortAwesome/Font-Awesome/issues/2709#issuecomment -32045585

Oke, menurut saya itu bug browser di setiap font.
Ada tiga contoh: http://jsfiddle.net/3T8Kz/

Pertama: Font-Awesome font centerlized, dengan bug.
Kedua: Contoh lain tetapi dengan font normal
Ketiga: Tanpa font, hanya div, dengan animasi yang sama dan tanpa bug.

Bug yang sama untuk saya Firefox 31, Linux.
Jika ini disebabkan oleh ukuran mesin terbang - itu cukup untuk memperbaiki mesin terbang yang dimaksudkan untuk berputar, tidak semuanya.

: +1: +1 ini harus dipertimbangkan untuk versi mayor berikutnya, di mana mungkin semua mesin terbang akan dikunjungi kembali.

Melihat masalah ini bahkan di situs resminya: http://i.gyazo.com/3ba2d0afad90c2e7fe6d2c0bb34e661d.mp4

(Firefox versi terbaru)

Ingin sekali melihat ini diperbaiki: +1:

permintaan tarik dan penyelidikan mendalam tentang masalah ini sangat kami harapkan

ini sepertinya bug chrome

@davegandy ada pembaruan?

@bayu_joo

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

Sama di Chrome 37.0.2062.124 di Mac OS X, Safari di iOS 7.0.4

+1

Saya dapat menangani (saya tidak akan mengatakan menyelesaikan) masalah ini untuk fa-refresh dalam proyek lokal menggunakan
-webkit-transform-origin: 49% 48.5%;
-moz-transform-origin: 49% 48.5%;
-ms-transform-origin: 49% 48,5%;
-o-transformasi-asal: 49% 48,5%;
transformasi-asal: 49% 48,5%;

Saya menggunakan "fa-circle-o-notch" sebagai simbol pemuatan dan menggunakan nilai ini untuk mengubah asal sehingga tidak akan goyah

.fa-circle-o-notch.fa-spin {
-webkit-transform-origin: 50% 48.9%;
-moz-transform-origin: 50% 48.9%;
-ms-transform-origin: 50% 48.9%;
-o-transformasi-asal: 50% 48.9%;
transformasi-asal: 50% 48.9%;
}

@magnyld Saya baru saja mencobanya, tetapi terus goyah setelah DOM berubah.

Anda tidak dapat mengandalkan transformasi asal. Ini bisa rusak jika ikon lebih besar atau lebih kecil. Seperti yang saya katakan sebelumnya, ini bukan masalah font yang mengagumkan, karena jika Anda mencoba memutar div bergaya lingkaran sempurna, hasilnya sama. Saya yakin ini adalah bug mesin webkit.

Tidak, ini juga ada di firefox https://bugzilla.mozilla.org/show_bug.cgi?id=930079

Goyah di Firefox 33, OSX.

Masalah yang sama di sini ( putaran goyah ) :(

tarik permintaan dengan analisis mendalam tentang masalah ini, solusi dan penjelasan yang tepat tentang kelebihan dan kekurangan akan sangat disambut.

Masalahnya sepertinya berasal dari ikon itu sendiri. Jika Anda mengambil versi spinner Icomoon, itu tidak goyah sama sekali. Ia bekerja dengan baik di Chrome 39, Windows dan IE11, Windows. Saya tidak tahu untuk browser lain.

http://jsfiddle.net/cxxzh0uf/

@ragu

Pendekatan icomoon untuk menjaga semua ikon dengan ukuran yang sama tampaknya lebih baik untuk tujuan ini, tetapi itu tidak cukup.

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

Jika saya memeriksa pseudoelement :before , saya melihat bahwa fontawesome "aneh"

Saya mencoba mengatur lebar dan tinggi yang sama tetapi semuanya tidak menjadi lebih baik.

Saya pikir ini terkait dengan font itu sendiri dan tidak ada yang bisa kita lakukan melalui CSS.

Dave harus melihat font dan memeriksa font yang dihasilkan oleh Icomoon untuk mencoba memahami cara terbaik untuk memperbaiki masalah ini.

Kami tidak dapat menerima permintaan pull dengan pengeditan pada file .otf, tetapi kami akan menghargai beberapa bantuan dalam masalah ini. Jika seseorang di sini dapat melihat font dan mengidentifikasi masalahnya sangat disambut

Maaf untuk bahasa Inggris saya, disini juga terlambat :)

@tagliala terima kasih telah menautkan masalah fa-clock-o di sini juga, itu masalah yang sama seperti yang disebutkan lainnya.
Saya perhatikan bahwa fa-cog memiliki masalah yang sama, tetapi tidak begitu terlihat dalam keadaan yang sama seperti fa-clock atau beberapa lainnya yang disebutkan di atas. Saya akan terus mengawasi utas ini dan akan melaporkan jika saya menemukan solusi, tetapi saya cukup yakin itu adalah ketidaksempurnaan kecil pada mesin terbang itu sendiri yang muncul hanya sekali berputar, jika tidak mereka terlalu kecil untuk diperhatikan dengan mata telanjang

Saya telah menemui masalah yang sama, apakah ada solusi yang pasti untuk ini?

@TsuiJie tidak, tidak ada

Saya memiliki masalah serupa dengan ikon putaran gemetar / goyah di IE10 dan 11.

Masalah saya adalah bahwa di IE 10/11 bilah gulir ditampilkan dan bersembunyi (berdenyut) selama pemintal terlihat.

apa yang saya temukan adalah bahwa dengan mengatur tinggi dan lebar tag ikon ke ukuran yang ditetapkan (ukuran yang sama dengan ikon itu sendiri), denyut berhenti.

Semoga bisa membantu seseorang.
Bersulang

Oke, saya telah menemukan masalahnya ada pada konversi Font Squirrel ke format font web. Sepertinya ini mengurangi beberapa metrik. Rencana saya:

• uji dengan versi baru dari Font Squirrel
• jika itu tidak berhasil, gulirkan solusi konversi saya sendiri

Oke, setelah banyak penyelidikan, saya melakukan beberapa perbaikan:

• Fa-spinner yang diperbarui agar memiliki efek visual yang lebih baik saat berputar.
• Mengaktifkan sendiri konversi font web. Font Squirrel pasti mengacaukan segalanya.
• Menyesuaikan beberapa metrik font yang tampaknya tidak berpengaruh pada mac, tetapi banyak digunakan oleh windows.
• Menambahkan contoh animasi ke halaman pengujian visual (http://fontawesome.io/test/).

Hasil

• Retina Mac: Sempurna di Chrome, Safari, dan Firefox
• Mac non-retina: Jauh lebih baik di Chrome, Safari, dan Firefox
• Windows 7: IE11 terlihat sempurna, Chrome 39 masih bermasalah, tetapi menurut saya tidak lebih buruk dari sebelumnya

Satu Peringatan

• Pada beberapa ukuran font, ada sedikit goyangan di semua browser (Icomoon memiliki masalah yang sama). Pada dasarnya, jika Anda menyimpannya menjadi kelipatan dan setengah kelipatan dari resolusi yang dioptimalkan (misalnya 14px, 21px, 28px, 35px), goyangan akan hilang.

Karena hasilnya jauh lebih baik daripada sebelumnya, saya akan menyebutnya dapat diterima untuk 4.3, dan tetap membuka masalah untuk 5.0.

Satu pembaruan lagi. Saya menemukan opsi apa yang dipilih tidak berfungsi dengan baik untuk konversi Font Squirrel. Jadi saya memasukkan kembali file-file itu. Dibiarkan terbuka.

@davegandy , saya tidak melihat ada peningkatan pada sisi saya dengan Firefox & Chrome di windows. Saya tidak mencoba IE11. Anda dapat melihat goyangan dengan jelas jika menggunakan langkah-langkah dalam animasi.

Saya memahami bahwa Anda tidak dapat berbuat banyak pada cabang 4.x tetapi apakah ada solusi yang solid untuk cabang 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);
}

Untuk orang lain yang berhasil sejauh ini, dan sedang mencari pemecahan masalah:

Jangan gunakan fa-spin dan fa-fw bersamaan.

Ini ternyata menjadi masalah saya (dan solusi saya).

@ragu

IE11 hampir sempurna, IMHO yang terbaik di windows.

Ikon pemintal baru dan seharusnya lebih baik dari sebelumnya.

Lihatlah bagian bawah halaman yang berat ini dengan semua browser: http://fontawesome.io/test/

Chrome dan firefox sangat buruk dalam ukuran kecil: kecewa:

dengan IE11, dengan fa-pulse, ada sedikit kesalahan. Ini seperti jika pemintal bergerak 1px ke atas dan ke bawah pada langkah animasi berikutnya.

Ini berfungsi untuk saya di IE 11 dan Chrome 40.0.2214.115 m tetapi goyah di Firefox 35.0.1.

Masih terlihat di Firefox 36 untuk Linux.

Video direkam pada 50 FPS.

Menambahkan scaleZ(1.001) memperbaiki masalah pada Firefox 36 di Linux.

Tidak yakin apakah masalah saya sama dengan masalah semua orang, tampaknya lebih seperti masalah # 4017, tetapi masalah tersebut ditutup dan dialihkan ke sini, jadi saya akan memposting solusi saya di sini.

Sepertinya jika Anda hanya menambahkan yang berikut ini ke kelas .fa-spin.

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

Tampaknya memperbaiki goyangan bagi saya.

Baik menghindari fa-fixed @qJake atau text- align: center @JakeCooper akan memperbaikinya untuk saya:

(Tanpa fa-spin, tidak ada jitter).

@isaksky dapatkah Anda memberikan biola yang menunjukkan masalah ini? saya punya ide

@tagliala Ini dia:

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

Chrome 40.0.2214.115, Windows 7. Tidak dapat mereproduksi masalah itu pada codepen yang disediakan.

Browser mana yang memberi Anda keluaran itu?

Saya tidak sedang menggunakan komputer kerja saya sekarang, tapi saya yakin ini adalah Chrome normal terbaru pada Windows 8. Saya biasanya tidak dapat mereproduksinya di sini pada mac ini di Chrome, tetapi jika saya memperbesar ke 110% atau 125% untuk Misalnya, itu muncul. (Ada juga masalah di mana tombol saya menumpuk secara vertikal, tapi itu bukan masalah yang saya maksud (saya rasa saya bisa memperbaikinya dengan menggunakan ems).). Apakah jitter terjadi pada Anda jika Anda mengacaukan zoom?

Saya baru saja membuatnya terjadi pada zoom normal (100%) di mac ini juga. Sepertinya terkait dengan mengotak-atik zoom dan / atau berpindah tab browser. Btw masalah juga terjadi dengan $('#spin-pls').toggleClass("fa-spin") , (alih-alih mengaktifkan 'sembunyikan' ketika sudah berputar) yang mungkin membuatnya sedikit lebih jelas di mana masalahnya.

Saya akan memeriksa besok dengan Mac saya

Saya memiliki solusi di sini untuk memutar roda gigi. Bagus dan mulus saat Anda mengarahkan kursor.

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

Saya membuat animasi keyframe yang berputar hanya 30 derajat ( rotateFa bawah). Lalu saya menyebutnya seperti ini animation: rotateFa .1s infinite;

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

Dan sebaliknya untuk membalikkannya kembali

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

Masalah masih ada.

Itu masih ada dalam kasus mode akselerasi perangkat keras dinonaktifkan. Firefox 36.0.4.

Harap jangan memberi +1 atau mengonfirmasi bahwa masalah ini masih ada, karena masalah terbuka dan karena kami tidak tahu cara memperbaikinya.

Silakan lihat di sini: https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -65381998

Mungkin akan menjadi ide yang baik untuk menempatkan kepala di halaman contoh ? Masalahnya cukup besar bagi saya untuk mewaspadai ikon animasi, tetapi sesuai https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -71056820, Anda tidak akan melihat di retina mac - bahkan jika Anda mengujinya di semua browser utama.

@Vusys Saya setuju. Anda dapat mengirim PR terhadap cabang master atau memberi tahu saya apa yang harus ditulis dan saya akan melakukannya

@tagliala selesai dengan permintaan tarik # 6686 yang menambahkan peringatan berikut di bawah contoh:

Beberapa browser di beberapa platform memiliki masalah dengan ikon animasi yang mengakibatkan efek goyangan yang tidak stabil. Lihat masalah # 671 untuk contoh dan solusi yang mungkin.

@Vusys terima kasih!

Saya melihat goyangan yang jauh lebih buruk daripada hanya +/- 1 piksel. Ada beberapa interaksi aneh antara transformasi spin dan transformasi CSS lainnya, sehingga terkadang pusat rotasi berada di luar ikon spinner.

Saya belum menentukan aturan CSS mana yang menyebabkan masalah ini di situs saya, tetapi sepertinya kasus urutan transformasi yang salah. Urutannya adalah: terjemahkan pusat ikon ke (0,0), lalu putar berdasarkan sudut saat ini, lalu terjemahkan (0,0) ke posisi layar di mana ikon tengah akan ditampilkan (atau sebaliknya). Di suatu tempat di sana CSS membuang terjemahan lain ke dalam campuran.

_Update: _ Saya menemukan apa masalahnya dalam kasus saya, jadi saya akan memposting jawabannya di sini jika ada orang lain yang dapat mengambil manfaat dari ini: Saya memiliki aturan CSS yang mengubah lebar elemen 'i' yang berputar disimpan di (elemen Bootstrap yang digunakan untuk ikon FA). Melakukan hal itu memberikan hasil yang tidak dapat diprediksi tergantung pada konteks ikon (misalnya tergantung pada apakah teks di tengah atau tidak).

Saya belum menentukan aturan CSS yang mana

Saya cukup yakin bahwa ini bukan aturan css dan masalahnya tidak terkait dengan FA itu sendiri

Lihat di sini: http://jsfiddle.net/tagliala/g0ngLhyr/

@tagliala , jika tidak terkait dengan aturan css atau FA, bagaimana Anda menjelaskan bahwa Icomoon tidak memiliki efek goyangan?

demo: http://jsfiddle.net/cxxzh0uf/

contoh lain adalah yang dibuat oleh google: http://www.getmdl.io/components/index.html#loading -section / spinner

@skoub biola Anda diperbarui ke 4.3.0: http://jsfiddle.net/tagliala/cxxzh0uf/9/

Lihat di sini: http://jsfiddle.net/tagliala/g0ngLhyr/

Perhatikan bahwa biola ini tidak memiliki font web sama sekali dan masih menunjukkan goyangannya

Implementasi @skoub google tidak berdasarkan webfonts dan IMHO itulah cara yang tepat untuk menangani fitur ini.

Saya ingin berbagi pengalaman saya di sini.

Ikon tunggal:
Saya hanya memiliki masalah dengan goyangan dengan ikon yang ditumpuk. Ikon tunggal berputar atau berdenyut dengan baik

Ikon bertumpuk:
Rupanya di situs saya kode di bawah ini tidak goyah pada judul di mana font-nya sedikit lebih besar, tetapi tidak goyah ketika font-nya lebih kecil. Fa-pulse bergetar dalam kedua kasus tersebut

disclaimer: Saya sangat baru dalam semua hal ini tetapi karena situs saya menghasilkan hasil yang goyah dan bagus, saya pikir Anda semua mungkin ingin tahu.

@isaksky Goyangan / buram dengan pemintal berkaitan dengan akselerasi perangkat keras

Item yang ditampilkan / disembunyikan dengan kelas .hide dapat membuat browser mengisyaratkan bahwa konten akan disembunyikan

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

Namun, browser berbasis Gecko, seperti Firefox, setidaknya bagi saya, masih mengalami masalah dengan lompatan teks di kotak dialog.

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

berfungsi, tetapi memberikan efek negatif pada Chrome dengan memberikan kompensasi berlebihan dan mengaburkan teks sepanjang waktu. Saya datang dengan dua solusi yang mungkin, yang pertama hanya menargetkan Firefox, yang terakhir adalah percepatan yang berbeda, filter: blur(0); dicatat dalam bug ini tetapi menurut saya agak hacky - mirip dengan transform: translateZ(0); - -dan dapat menyebabkan hasil negatif di masa depan.

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

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

Itu memperbaiki masalah, terima kasih @toastal ! Bisakah ini dikerjakan menjadi solusi umum @tagliala ?

@ Toastal Apakah Anda keberatan untuk memberikan jsfiddle yang menunjukkan solusi Anda dan membandingkannya dengan putaran fontawesome dasar?

Saya mencoba semua contoh yang Anda posting, dan saya tidak dapat mereproduksi di Firefox Aurora:

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

Saya menggunakan debian Jessie, dan karena beberapa masalah driver nvidia, saya rasa saya tidak memiliki akselerasi perangkat keras.

Proses GLXtest gagal (keluar dengan status 1): Ekstensi GLX tidak ada
Procesador WebGL Bloqueado untuk tu tarjeta gráfica debido a problemas no resueltos del controlador.

Juga, tidak dapat mereproduksi di sini:
http://shb.github.io/bootstrap-loading-screen/#icon : spinner

apakah ini terpecahkan, atau karena saya tidak mengaktifkan akselerasi perangkat keras?

Saya telah menemukan perbaikan potensial lainnya untuk masalah ini (menjalankan firefox 39) berkat posting ini: http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css -transformasi /

Saya telah mengedit JSFiddle di atas dengan perbaikan: http://jsfiddle.net/5z9om45L/

cukup letakkan "perspektif (1px)" di properti transformasi. Ini "melempar rendering objek ke GPU", menurut posting yang ditautkan di atas. Saya secara pribadi belum mengujinya secara ekstensif jadi saya tidak tahu secara spesifik apa yang dilakukannya atau apakah ini menyebabkan masalah lain, tetapi sejauh ini tampaknya baik-baik saja. Ini telah menjadi salah satu masalah terbesar saya dengan Firefox, jadi saya pikir saya akan menyebutkannya di sini.

Saya telah mengedit JSFiddle di atas dengan perbaikan: http://jsfiddle.net/5z9om45L/

Ini memperbaiki masalah dengan baik untuk saya.

Ini adalah Biola terbaru yang menunjukkan goyangan pada kompas. Tombol cari kedua menunjukkan fa-spin sederhana dengan goyangan yang diucapkan.

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

@spiderr rupanya, fa-lg meningkatkan efek goyangan karena berhubungan dengan tinggi garis dan ukuran font. Coba gunakan ukuran font 14px atau kelipatannya

@tagliala terima kasih, tip bagus! fa-2x pasti lebih baik. Ada juga beberapa artefak aneh (piksel kotor) di sekitar lingkaran. Berikut ini biola di fa-5X yang menunjukkannya lebih jelas pada tombol biru besar. Ini adalah detail yang sangat kecil, tetapi jika seseorang pernah membersihkan kompas, itu akan bagus. Harapan saya adalah ketika kompas berputar, Anda tidak tahu lingkaran itu bergerak, hanya jarum kompas bagian dalam. Jika saya duduk 2 meter dari layar dengan fa-5x, itu terlihat bagus :-)

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

Tidak yakin apakah ini utas yang benar, tapi ..
Di firefox, "fa fa-cog fa-spin" saya berhenti berputar. Saya menggunakannya dalam panggilan ajax dengan modal. Ini berfungsi dengan baik di Safari dan Chrome tetapi firefox berhenti karena beberapa alasan. Ada pemikiran ??

app / javascripts / my_file.js
$ (dokumen) .ready (function () {
$ ('# search_btn'). pada ('klik', fungsi () {
$ ('# hasil'). kosong ();
var myForm = $ ('# user_search');
$ ("# spinner_modal"). modal ("show");
$ .ajax ({
url: myForm.attr ('action'),
ketik: "POSTING",
data: myForm.serialize (),
dataType: 'text',
sukses: function (html) {
$ ("# spinner_modal"). modal ("sembunyikan");
$ ('# hasil'). append (html);
},
kesalahan: fungsi (xhr, satus, err) {
$ ("# spinner_modal"). modal ("sembunyikan");
},
batas waktu: 60.000
});
return false;
});

_my_p Partial.html.erb

jonathanparrish pada 11 Agu 2015