ページでcssアニメーションを使用していますが、アニメーションの実行中にSafariがページの他の場所で無関係なフォントの太さを変更しているようです。なぜこれが起こるのか考えていますか？ChromeなどのWebkitブラウザを含め、他のすべてのブラウザは正常に動作します。
私はここのビデオでバグを詳しく説明しました-http ://www.screenr.com/gZN8
このサイトもここにあります-http://airport-r7.appspot.com/ですが、急速に変化し続ける可能性があります。
矢印アイコンにコンパス（@ transition-property、@ transition-duration）を使用しています。点滅している見出しにはトランジションは適用されません。Macの場合-ハードウェアアクセラレーションかもしれませんが、私はまだそれを理解しようとしています。
GPU合成をトリガーすると（たとえば、CSSアニメーションを介して）、ブラウザーはその要素をGPUに送信しますが、その要素の上部/左側のプロパティが変更された場合にその要素の上に表示されるものもすべて送信します。これには、アニメーション化された要素の後に表示されるすべてのposition：relative要素が含まれます。
解決策は、アニメーション要素のposition：relativeと、それを他のすべての上に置くz-indexを与えることです。そうすれば、アニメーションを取得できますが、関連のない要素で（優れたIMO）サブピクセルフォントのレンダリングを維持できます。
これが問題と解決策のデモですhttp://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1
更新： Chromeの新しいバージョンは、要素に透明性がない限り、たとえば透明または半透明のピクセルがない背景がある限り、GPU合成要素でサブピクセルアンチエイリアスを保持します。border-radiusのようなものは、半透明のピクセルを導入することに注意してください。
どうやら、それはハードウェアアクセラレーションに支払う代償です。すべてのテキストが瞬間的に画像に変わり、レンダリング品質が低下します。
ただし、html {-webkit-font-smoothing: antialiased}サブピクセルアンチエイリアシングをオフにするように適用すると、この問題は解消されます。それが今のところ私がしていることです。
更新：それ以来、これは、アニメーション化されているセクションがテキストに影響を与えるかどうかをブラウザーが確認できない場合にのみ発生することもわかりました。これは通常、z-indexアニメーション化されている要素の上（上）にテキストを配置するか、テキストの背景が完全に不透明であることを確認することで処理できます。
私はこの問題に何度も直面し、アニメーション要素に次のcssを追加することに成功しました。
z-index: 60000;
position: relative;
効果を上げるには、z-indexとpositionの両方が必要なようです。私の場合、FontAwesomeのアニメーションスピナーで使用していました。