web-dev-qa-db-ja.com

関連のないアニメーションが実行されているときにSafariがフォントの太さを変更する

ページでcssアニメーションを使用していますが、アニメーションの実行中に、Safariがページの他の場所で無関係なフォントの太さを変更しているようです。なぜこれが起こるのか？他のすべてのブラウザーは正常に動作します。Chromeなどのwebkitブラウザーが含まれます。

私はここでビデオのバグを詳しく説明しました- http://www.screenr.com/gZN8

サイトもここにあります- http://airport-r7.appspot.com/ ですが、急速に変化し続ける可能性があります。

矢印アイコンにコンパス（@ transition-property、@ transition-duration）を使用しています。点滅している見出しにトランジションが適用されていません。 Macの場合-ハードウェアアクセラレーションの可能性がありますが、それでも解決しようとしています。

animationcsssafariwebkitcss-animations
33
Sudhir Jonathan

（たとえば、CSSアニメーションを介して）GPU合成をトリガーすると、ブラウザーはその要素をGPUに送信しますが、上/左のプロパティが変更された場合にその要素の上に表示されるものも送信します。これには、positioning：アニメーション要素の後に表示される相対要素が含まれます。

解決策は、アニメーション要素の位置を指定することです。相対位置と、それを他の何よりも優先するZインデックスです。このようにしてアニメーションを取得しますが、（優れたIMO）サブピクセルフォントのレンダリングを無関係な要素に維持します。

これが問題と解決策のデモです http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1

更新：Chromeの新しいバージョンは、要素に透明度がない限り、GPU合成要素のサブピクセルアンチエイリアスを保持しますたとえば、背景に透明または半透明のピクセルがありません。border-radiusのようなものは、半透明のピクセルを導入することに注意してください。

71
JaffaTheCake

どうやら、それはハードウェアアクセラレーションに対して支払う代償です。すべてのテキストが一時的に画像に変わり、レンダリング品質が低下します。

ただし、html {-webkit-font-smoothing: antialiased}サブピクセルのアンチエイリアスをオフにすると、この問題はなくなります。それが今私がやっていることです。

更新：それ以来、アニメーション化されているセクションがテキストに影響を与えるかどうかをブラウザーが確認できない場合にのみ、これが発生することも知りました。これは通常、上のテキスト（より高いz-indexより）アニメーション化される要素、および/またはテキストの背景が完全に不透明であることを確認します。

37
Sudhir Jonathan

私はこの問題に何度も直面しており、アニメーション要素に次のCSSを追加することに成功しています。

z-index: 60000;
position: relative;

効果を発揮するには、z-index andの両方の位置が必要なようです。私の場合は、Font Awesomeアニメーションスピナーで使用していました。

8
mrkhyns