Firefoxのフリーク。 このプロジェクトでは、IEと同じくらい苦労しました。 3.0.1を使用していますか？ この問題を解決するための新しいMozilla固有のスピンクラスがあります。 それでも問題が解決しない場合は、お知らせください。再開します。

3.0.1を使用していることを確認できます。再ダウンロードして再確認しても、問題は解決しません。

以前のコメントでは、私の例が削除されたようです。この問題が発生するmakoテンプレートをお送りしますか？

Chromium（24.0.1312.56）で.icon-spinを使用し、LinuxでChromeを使用すると、揺れ/ぐらつきが発生します。Firefox（18.0.2）は問題ないようです。 13d5dd373cbf3f2bddd8ac2ee8df3a1966a62d09でテスト済み

Firefox 18.0.2で揺れ/ぐらつきが発生しますが、特定の状況ではChromeまたはIEでは発生しません。 しかし、正確な原因を特定することはできませんでした。 （font-awesome v3.0.2を使用）

私はWindows7のすべてのブラウザーでぐらつきますが、OSXではそれはすばらしいことです。

@davegandy ping

Chromeバージョン26.0.1410.65（かなり最近のバージョン）でぐらつきがあります。 これに関する作業はありますか？

ping！ 私も問題を抱えています。 問題が解決された理由は不明です。

問題を説明するフィドルを提供していただけますか？

ここで同じ問題、解決策はありますか？

Chromeの最新バージョン（28.0.1500.71）で確認済み。 アイコンが小さいほど、動きが誇張されています。 この問題は、呼び出される場所のアイコンスピンクラスに影響します。

3D回転を試しましたが成功しませんでした。 icon-circle自体を回転させることは問題です。

Windows 7では、Firefox 22.0、Chrome28.0.1500.72で問題が発生しています。 IE 8-10のぐらつきはほとんど見えませんが、私が問題を観察しているケースをよく見ると、まだわずかなぐらつきがあると思います。 この問題のフィドルを設定するために最善を尽くしますが、時間がかかる可能性がある十分なコンテキストがあります。

私のjsfiddleではありませんが、問題のあるものは次のとおりです： http ：//jsfiddle.net/Rnt9N/2/
Macでは見栄えがしますが、Windows7のFirefoxでは不安定です。

それは私にとってそれほど悪くはありません（firefox 22 / w7 x64）。

node-webkitv0.7.5を使用しても同じ問題が発生します。
最終的にspin.jsを使用しました

FontAwesomeのせいでもあるので、これを再開します

このツイートのように.fa-spin { -webkit-filter: blur(0); }すると、修正されたことがわかります。

@paldepindこのソリューションを共有してくれてありがとう

現在のスピンと提案されたスピンを並べて表示するフィドルを提供していただけますか？

このフィドルをフォークすることができます： http ：

Windows 7のChromeとのぐらつきに違いは見られません。アイコンが半分のfpsレートのように、「遅く」回転していることに気づいています。

@taglialaどういたしまして！

これは2つのスピナーを示すフィドルです。1つは修正あり、もう1つは修正なしです： http ：

Linux上のChrome30とFirefox24でテストしました。 Firefoxではすべてがスムーズですが、Chromeでは修正なしのスピナーが少し不安定です。 ただし、どのブラウザでも回転速度に違いは見られません。

Windows7のChrome32はアイコンをまったく表示しません...

GNU / Linuxでは、Chromium30で修正が機能しています。 filterプロパティはまだサポートされていないため、Firefox26では同じではありません。 https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Windows8上のFirefox26の場合、どちらもまだ不安定です。 Windows8のChrome31では、どちらも問題なく表示されます。
2013年12月12日には、午前2時20分PMで、フェリペPeñaililloの[email protected]は書きました：

GNU / Linuxでは、Chromium30で修正が機能しています。 filterプロパティはまだサポートされていないため、Firefox26では同じではありません。 https://developer.mozilla.org/en-US/docs/Web/CSS/filter

—
このメールに直接返信するか、GitHubで表示してください。

残念ながら、それはWindowsに表示されず、OSXを吸います:(

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

回転するアイコンはアンチエイリアス処理されておらず、ぐらつき続けます

これが実行可能な回避策であることを望みましたが、そうではありません

@taglialaそれは残念です。 Linuxを搭載したマシンで修正を試しただけで、すばらしい結果が得られました。

@paldepindああ、私は私のubuntuマシンで回転するものが本当に吸うことを覚えています

サブピクセル変換を試してみてください： http ：

こんにちは！ 今日Chrome31にアップデートしましたが、ぐらつきがなくなりました。 したがって、この問題は自然に解消されるかもしれません。

@taglialaは私が何を見るべきか

@taglialaサブピクセル変換フィドルは、KubuntuのChrome31とFirefox26でまだぐらつきを示しています。

ただし、これはサブピクセルレンダリングが原因であることに同意します。

これは、回転文字O（ "oh"）とその周りに赤い円形の境界線を示す新しいフィドルです。

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

この例では、赤い境界線がスムーズに回転しますが、Oがぐらつくため、ぐらつき効果が実際に悪化します。

-webkit-filter: blur(0);は私のために問題を修正します。 --webkit-font-smoothingなど、それを修正する他のディレクティブが見つかりません。

また、KDEのフォントアンチエイリアスを無効にしてみました（[システム設定]-> [アプリケーションの外観]-> [フォント]-> [アンチエイリアスを使用] =無効）。これで問題も修正されます。

残念ながら、 -webkit-filter: blur(0);はウィンドウを壊すため、解決策ではありません

@taglialaは、どのバージョンのWindowsでわかりません。 最新のChromeとIE11で提案されているソリューションをテストしました。Firefoxでは動作しないようです。

@silentworksそれは

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

さらに、それが機能するとき、それはアンチエイリアスが本当に貧弱です。

主な問題は、フォント内のアイコンが完全に中央に配置されていないことだと思います： http ：

下のスクリーンショットでわかるように、下に3つの空のピクセル、上に2つの空のピクセルがあります。これにより、ぐらつきが発生します。

アイコンが中央に配置されるように幅を設定できる場合、アイコンはぐらつきません： http ：

私見この回転機能は削除する必要があります、それは利点よりも多くの問題を引き起こします

多くの作業があるため、WONTFIX：-1：
しかし、ええ、それは気の利いたものでした...しかし、必要ではありませんでした。 すべてのフォントをやり直していくつかのアイコンを回転させるのは大変な作業であり、流れに逆らいます。

@conradoここに「wontfix」ラベルはありません

それはまだ不思議です。 おそらく、スピンに適したグリフのいくつかを作り直すことができます

それはまだ不思議です。

いいえ、そうではありません。 正しく開かれ、バグとしてラベル付けされています

コメントを読んだ後でも、この問題のステータスはよくわかりませんが、まだ開いているとマークされているため、XubuntuのChromium31とFirefoxAurora 28（2014-1-13）にはまだ問題があります。

@ ahamilton9はこちらをご覧ください： //github.com/FortAwesome/Font-Awesome/issues/2709#issuecomment -32045585

わかりました、それはすべてのフォントのブラウザのバグだと思います。
3つの例があります： http ：

最初：Font-バグのある素晴らしいフォントが中央に配置されています。
2番目：別の例ですが、通常のフォントを使用しています
3番目：フォントなし、divのみ、同じアニメーション、バグなし。

私にとって同じバグFirefox31、Linux。
これがグリフのサイズが原因である場合は、すべてではなく、回転することを目的としたグリフのみを修正するだけで十分です。

：+1：+1これは、おそらくすべてのグリフが再検討される次のメジャーバージョンで検討する必要があります。

公式ウェブサイトでもこの問題を確認： http ：

（Firefoxの最新バージョン）

これが修正されるのを見たいです：+1：

この問題に関するプルリクエストと詳細な調査は大歓迎です

これはクロムのバグのようです

@davegandy更新はありますか？

@thejhnz

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

Mac OSXのChrome37.0.2062.124、iOS7.0.4のSafariでも同じ

+1

ローカルプロジェクトでfa-refreshを使用して、この問題を処理することができました（解決するとは言いません）。
-webkit-transform-origin：49％48.5％;
-moz-transform-origin：49％48.5％;
-ms-transform-origin：49％48.5％;
-o-transform-origin：49％48.5％;
変換元：49％48.5％;

ロードシンボルとして「fa-circle-o-notch」を使用しており、この値を使用して原点を変換し、ぐらつかないようにします。

.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-transform-origin：50％48.9％;
変換元：50％48.9％;
}

@magnyld試してみましたが、DOMが変更された後もぐらつき続けます。

オリジンズトランスフォームの使用に依存することはできません。 アイコンが大きくなったり小さくなったりすると、これが壊れる可能性があります。 前に言ったように、これはフォントの素晴らしい問題ではありません。完全なサークルスタイルのdivをスピンしようとしても、結果は同じだからです。 これはWebkitエンジンのバグだと思います。

いいえ、これはFirefoxにもありますhttps://bugzilla.mozilla.org/show_bug.cgi?id=930079

Firefox 33、OSXでのぐらつき。

ここで同じ問題（ぐらつきスピン）:(

この問題の詳細な分析、回避策、および長所と短所の適切な説明を含むプルリクエストを歓迎します。

問題はアイコン自体に起因しているようです。 Icomoonスピナーバージョンを使用すると、ぐらつきはまったくありません。 Chrome 39、WindowsおよびIE11、Windowsでうまく機能します。 他のブラウザについてはわかりません。

http://jsfiddle.net/cxxzh0uf/

@skoub

アイコンをすべて同じサイズに保つというicomoonのアプローチは、この目的には適しているように見えますが、それだけでは十分ではありません。

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

:before疑似要素を調べると、fontawesomeが「奇妙」であることがわかります。

同じ幅と高さを設定しようとしましたが、状況は良くなりません。

これはフォント自体に関係していると思いますし、CSSでできることは何もありません。

Daveはフォントを調べ、Icomoonによって生成されたフォントを調べて、この問題を修正するための最良の方法を理解しようとする必要があります。

.otfファイルを編集したプルリクエストは受け付けられませんが、この件についてサポートをいただければ幸いです。 ここの誰かがフォントを見て問題を特定することができれば大歓迎です

私の英語でごめんなさい、それもここで遅いです:)

@taglialaここでもfa-clock-oの問題をリンクしてくれてありがとう、それは他の人が言及しているのと同じ問題です。
fa-cogにも同じ問題があることに気づきましたが、同じ状況では、fa-clockや上記の他のいくつかの問題ほど目立ちません。 私はこのスレッドを監視し続け、回避策が見つかった場合は報告しますが、回転するとグリフ自体の小さな欠陥が表面化するのはかなり確信しています。そうでない場合、肉眼で気付くには小さすぎます。

私は同じ問題に遭遇しました、これに対する確認された解決策はありますか？

@TsuiJieいいえ、ありません

IE10と11のスピンアイコンの揺れ/ぐらつきについても同様の問題がありました。

私の問題は、IE 10/11では、スピナーが表示されている限り、スクロールバーが表示および非表示（パルス）していたことでした。

アイコンタグの高さと幅を設定したサイズ（アイコン自体と同じサイズ）に設定することで、脈動が止まったことがわかりました。

それが誰かを助けることを願っています。
乾杯

さて、問題はFontSquirrelのWebフォント形式への変換にあることがわかりました。 いくつかの指標を変更しているようです。 私の計画：

• FontSquirrelの新しいバージョンでテストする
• それがうまくいかない場合は、私自身の変換ソリューションをロールバックしてください

さて、かなりの量の調査の後、私はいくつかの修正を加えました：

• 回転時の視覚効果が向上するようにfa-spinnerを更新しました。
• Webフォント変換をホームロールしました。 FontSquirrelは間違いなく物事を台無しにしていました。
• 明らかにMacには影響しないが、Windowsで頻繁に使用されるいくつかのフォントメトリックを調整しました。
• ビジュアルテストページ（http://fontawesome.io/test/）にアニメーションの例を追加しました。

結果

• Retina Mac：Chrome、Safari、Firefoxで完璧
• 非RetinaMac：Chrome、Safari、Firefoxではるかに優れています
• Windows 7：IE11は完璧に見えますが、Chrome 39にはまだ問題がありますが、以前より悪くはないと思います

1つの警告

• いくつかのフォントサイズでは、すべてのブラウザで少しぐらつきがあります（Icomoonにも同じ問題があります）。 基本的に、最適化された解像度の倍数と半分（14px、21px、28px、35pxなど）に保つと、ぐらつきはなくなります。

結果は以前よりもはるかに優れているので、これを4.3で許容できると呼び、5.0でも問題を解決しません。

もう1つの更新。 FontSquirrel変換で選択したオプションがうまく機能していないことがわかりました。 だから私はそれらのファイルを元に戻しました。開いたままにしておきます。

@ davegandy 、WindowsでFirefoxとChromeを使用しても改善は見られません。 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はほぼ完璧で、私見はWindowsで最高です。

スピナーアイコンは新しく、以前よりも良くなっているはずです。

すべてのブラウザでこの重いページの下部を見てください： http ：

ChromeとFirefoxは小さいサイズでは本当に悪いです：がっかり：

IE11では、fa-pulseで、少しグリッチがあります。 これは、スピナーが1px上に移動し、次のアニメーションステップで下に移動するようなものです。

IE11とChrome40.0.2214.115 mで動作していますが、Firefox35.0.1ではぐらつきます。

Linux用のFirefox36でもまだ目立ちます。

ビデオは50FPSで記録されます。

scaleZ(1.001)追加すると、Linux上のFirefox36の問題が修正されます。

私の問題がみんなの問題と同じかどうかはわかりませんが、問題＃4017のように見えましたが、ここで閉じられてリダイレクトされたので、ここに解決策を投稿します。

以下を.fa-spinクラスに追加するだけのようです。

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

私のぐらつきを直したようです。

fa-fixed @qJakeもtext- align：center @JakeCooperも回避せず、修正してくれます。

（fa-spinがなければ、ジッターはありません）。

@isakskyこの問題を示すフィドルを提供して

@taglialaどうぞ：

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

Chrome 40.0.2214.115、Windows7。提供されたコーデックでその問題を再現することはできません。

どのブラウザがその出力を提供していますか？

私は現在仕事用のコンピューターを使用していませんが、Windows 8の最新の通常のChromeだと思います。通常、ChromeのこのMacで再現することはできませんが、110％または125％にズームインするとたとえば、表示されます。 （ボタンが垂直に積み重なるという問題もありますが、それは私が意味する問題ではありません（emsを使用して修正できると思います）。） ズームをいじると、ジッターが発生しますか？

このMacでも通常の（100％）ズームでそれが起こるようになりました。 ズームをいじったり、ブラウザのタブを切り替えたりすることに関連しているようです。 ところで、この問題は$('#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); }
}

問題はまだ存在します。

ハードウェアアクセラレーション無効モードの場合でも存在します。 Firefox36.0.4。

問題は未解決であり、修正方法がわからないため、+ 1したり、この問題がまだ存在することを確認したりしないでください。

こちらをご覧ください： //github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -65381998

おそらく、例のページに注意を向けるのは良い考えでしょうか？ この問題は私がアニメーションアイコンに非常に警戒するのに十分な大きさですが、 https： //github.com/FortAwesome/Font-Awesome/issues/671#issuecomment -71056820によると、網膜マックでは気付かないでしょう-すべての主要なブラウザでテストした場合でも。

@Vusys同意します。 マスターブランチに対してPRを送信するか、何を書くべきかを教えてください。

@taglialaはプルリクエスト＃

一部のプラットフォームの一部のブラウザでは、アニメーションアイコンに問題があり、揺れるぐらつき効果が発生します。 例と考えられる回避策については、問題＃671を参照してください。

@Vusysありがとう！

+/- 1ピクセルよりもはるかに悪いぐらつきが見られます。 スピン変換と他のCSS変換の間には奇妙な相互作用があるため、回転の中心がスピナーアイコンの外側にある場合があります。

私のサイトでは、どのCSSルールがこの問題を引き起こしているのかをまだ特定していませんが、変換順序が間違っている場合のようです。 順序は次のとおりです。アイコンの中心を（0,0）に移動し、次に現在の角度で回転し、次に（0,0）を中心アイコンが表示される画面位置に移動します（またはその逆）。 どこかでCSSが別の翻訳をミックスに投入しています。

_更新：_自分の場合の問題がわかったので、他の誰かがこれから利益を得ることができる場合に備えて、ここに回答を投稿します：スピナーが「i」要素の幅を変更するCSSルールがありましたに保存されました（FAアイコンに使用されるBootstrap要素）。 これを行うと、アイコンのコンテキストによっては（たとえば、テキストが中央に配置されているかどうかによって）、予測できない結果が生じます。

どのCSSルールを特定していません

私はそれがcssルールではなく、問題がFA自体に関連していないことをかなり確信しています

ここを見てください： http ：

@ tagliala 、cssルールまたはFAに関連していない場合、Icomoonにはウォブル効果がないことをどのように説明しますか？

デモ： http ：

別の例はグーグルによって作られたものです： http ：

@skoubフィドルを4.3.0に更新： http ： //jsfiddle.net/tagliala/cxxzh0uf/9/

ここを見てください： http ：

このフィドルにはWebフォントがまったくなく、まだぐらつきが見られることに注意してください

@skoub googleの実装は、この機能を処理する適切な方法であるWebフォントとIMHOに基づいていません。

ここで私の経験を共有したいと思います。

単一のアイコン：
積み重ねられたアイコンのぐらつきにのみ問題があります。 単一のアイコンがうまく回転またはパルスする

積み上げアイコン：
どうやら私のサイトでは、以下のコードはフォントが少し大きいタイトルではぐらつきませんが、フォントが小さいとぐらつきます。 どちらの場合もfa-pulseがぐらつく

免責事項：私はこれらすべてに非常に慣れていませんが、私のサイトはぐらついた結果と良い結果の両方を生成するので、皆さんが知りたいと思うかもしれません。

@isakskyスピナーでのぐらつき/ぼやけは、ハードウェアアクセラレーションと関係があります

.hideクラスで表示/非表示になっているアイテムは、コンテンツが非表示になることをブラウザに示唆させることができます

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

ただし、FirefoxのようなGeckoベースのブラウザは、少なくとも私にとっては、ダイアログボックスのテキストのジャンプに問題があります。

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

動作しますが、常にテキストを過剰に補正してぼかすことにより、Chromeに悪影響を及ぼします。 私は2つの可能な解決策を思いつきました。最初は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ソリューションを示し、基本的なfontawesomeスピンと比較するjsfiddleを提供してもよろしいですか？

皆さんが投稿したすべての例を試していますが、FirefoxAuroraでは再現できません。

20150722004007
Mozilla / 5.0（X11; Linux x86_64; rv：41.0）Gecko / 20100101 Firefox / 41.0

私はDebianJessieを使用していますが、nvidiaドライバーの問題があるため、ハードウェアアクセラレーションがないと思います。

GLXtestプロセスが失敗しました（ステータス1で終了）：GLX拡張機能がありません
Procesador WebGL Bloqueadoparatutarjetagráficadebidoaproblemasno resueltos delcontrolador。

また、ここで再現することはできません：
http://shb.github.io/bootstrap-loading-screen/#icon：spinner

それは解決されましたか、それともハードウェアアクセラレーションが有効になっていないためですか？

この投稿のおかげで、この問題の別の潜在的な修正（firefox 39を実行）を見つけました： http ：

上記のhttp ： //jsfiddle.net/5z9om45L/

変換プロパティに「perspective（1px）」を入力するだけです。 上にリンクされた投稿によると、これは「オブジェクトのレンダリングをGPUにスローします」。 私はこれを個人的に広範囲にテストしていないので、これが具体的に何をするのか、またはそれが他の問題を引き起こすかどうかはわかりませんが、これまでのところ問題はありません。 これはFirefoxでの私の最大の問題の1つだったので、ここで言及したいと思いました。

上記のJSFiddleを修正して編集しました： http ：//jsfiddle.net/5z9om45L/

それは私にとって問題をうまく修正します。

これは、コンパスのぐらつきを示す更新されたフィドルです。 2番目のロケートボタンは、顕著なウォブリングを伴う単純なfa-spinを示しています。

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

@spiderrは、行の高さとフォントサイズを処理するため、 fa-lgはウォブル効果を高めるようです。 14pxまたは倍数のフォントサイズを使用してみてください

@taglialaありがとう、素晴らしいヒント！ fa-2xは間違いなく優れています。 円の周りにも奇妙なアーティファクト（ダーティピクセル）がいくつかあります。 これはfa-5Xのフィドルで、大きな青いボタンでそれらをより明確に示しています。 これは細かい詳細ですが、誰かがコンパスを片付けたら、それは素晴らしいことです。 私の望みは、コンパスが回転するとき、円が動いていることを知ることができず、内側のコンパスの針だけを知ることです。 画面から2メートル離れたところにfa-5xで座っていると、見栄えがします:-)

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

これが正しいスレッドかどうかはわかりませんが、..
Firefoxで、私の「fa fa-cogfa-spin」が回転を停止します。 モーダルを使用したajax呼び出しで使用します。 SafariとChromeでは正常に動作しますが、Firefoxは何らかの理由で停止します。 何かご意見は？？

app / javascripts / my_file.js
$（document）.ready（function（）{
$（ '＃search_btn'）。on（ 'click'、function（）{
$（ '＃results'）。empty（）;
var myForm = $（ '＃user_search'）;
$（ "＃spinner_modal"）。modal（ "show"）;
$ .ajax（{
url：myForm.attr（ 'action'）、
タイプ：「POST」、
データ：myForm.serialize（）、
dataType： 'text'、
成功：function（html）{
$（ "＃spinner_modal"）。modal（ "hide"）;
$（ '＃results'）。append（html）;
}、
エラー：function（xhr、satus、err）{
$（ "＃spinner_modal"）。modal（ "hide"）;
}、
タイムアウト：60000
}）;
falseを返します。
}）;

_my_partial.html.erb

jonathanparrish 2015年08月11日