CSS3のアニメーション中にWebkitのテキストのエイリアシングが変わる

Question

これはファンキーなものです。そして、Chromeバージョン20.0.1132.57とSafari 5.1.7の問題であるように思われるので、Webkit関連のものだと確信しています。テキストで説明するのはほとんど不可能なので、私は問題を説明するために短いビデオをアップロードしました。

ビデオ： http://youtu.be/0XttO-Diz2g

ショートバージョン：CSS3アニメーションの間に 、（絶対または相対）位置の要素内にあるテキストは、そのアンチエイリアスを変更するようです。アニメーションの実行中は大胆になります。

注： これは、スケーリングされた要素がアニメーションをぼやけてしまうのと同じではありません。 （this issue）

どのような考え、回避策など？

Answer 1

更新：私の古い回答は機能しますが、問題を解決するための唯一の方法です。代わりに、他の要素が影響を受ける理由についてこれを読んでください：http://jsbin.com/efirip/5/quiet。要するに、アニメーション化された要素は、z-indexを与えることによって、それ自身のスタッキングコンテキストに配置されるべきです。

古い回答：

これはWebKitに関連しています。正直なところ私はそれがなぜそれを行うのか分かりませんし、それもバグだと思います。ページ上の任意の要素に3D関連のCSS3宣言を追加することで、それを防ぐことができます。例：

body { 
    -webkit-transform: translateZ(0); 
} 

または：

body { 
    -webkit-backface-visibility: hidden; 
} 

これらの宣言の存在は、あなたが指摘してきた問題を防止し、アニメーションのためのハードウェアアクセラレーションを使用するようにWebKitの原因となります。