3

この質問は元は FontAwesome に関連していましたが、Firefox の一般的な問題です。

だから私はfa-spinアイコンを回転させるクラスを使用しています。ここでいくつかの例を見つけることができます。

回転する css ファイルは次のとおりです。

// Spinning Icons
// --------------------------

.#{$fa-css-prefix}-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}

@-moz-keyframes spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

Chrome と IE10 ではすべて正常に動作するようになりましたが、firefox : jsFiddleでは動作しません 。初めて実行するときは問題ないように見えますが、サイトを操作してみてください (例: スクロールするか、jsFiddle でスクリプトを再度実行します)。アニメーションはすべてぎくしゃくします。
何がこの奇妙な動作を引き起こすのかわかりません。誰かが私を助けてくれることを願っています.

編集

この問題は、Windows 7 32 ビットおよび 25.0 バージョンの Firefox (アドオンなし) で発生します。ただし、Windows 7 32 ビット 25.0 Firefox を搭載した自宅の PC でも動作します。画面に表示されるプレビュー:
最初の数秒間は動作しますが、その後は不安定になることに注意してください (このスタッタリングは、私の .gif が悪いためです)。

詳細については、私の回答を参照してください

4

1 に答える 1

2

この「ハック」を追加する前に、まずドライバーを更新してみてください

私が気付いたのは、IE と Chrome では実際にテキストがぼやけていることですが、FF ではそうではありません。ぼかしフィルターを使おうと思ったのですが、うまくいきませんでした。また、フォントの幅は同じままではなかったので、クライアントに幅を思い出させるか、幅を常に静的にする必要がありました。

SVG フィルターの XML URL に出会いました。これは、Firefox 10 以降と Android の Firefox に特有のものです。これを自分の要素に適用しようとしたところ、問題は完全に解消されました! 飽和フィルターが色を取り除かないように

使用しました。<feColorMatrix type=saturate values=1/>

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'1\'/></filter></svg>#grayscale");

これを.fa-spinFontAwesome が使用するクラスに追加すると、回転するすべての要素で機能します。

jsフィドル

于 2013-10-30T14:02:04.703 に答える