15

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

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

短いバージョン: CSS3 アニメーション中に、配置された要素 (絶対または相対) 内にあるテキストのアンチエイリアスが変更されたように見えます。アニメーションの実行中はより太くなります。

注: これは、スケーリングされた要素がアニメーション中にぼやけてしまうこととは異なります。（本号）

考え、回避策などはありますか？

4

1 に答える 1

27

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

古い答え：

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

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

または：

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

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

于 2012-07-21T08:27:19.540 に答える