1

いくつかの<article>要素がすべて一列に並んだページがあります。要素の下部には、3D CSS 変換を使用する<article>小さなアイコンがあります。<div>奇妙なことに、オリジナルで<article>はハードウェア アクセラレーションがオンになっていませんが、この小さな<div>ことが原因で残りの<article>要素にもハードウェア アクセラレーションが設定されています (ここで概説されている方法を使用しています: http://mir.aculo.us /2011/02/08/visualizing-webkits-hardware-acceleration/<div> )、それを必要とするのは小さなものだけですが。

最初の を非表示にする<div>と、後続の のハードウェア アクセラレーションが無効になり<article>ます。

<article> <-- Does not have HW acceleration
[other divs and content]
<div></div> <-- Has HW acceleration
</article>

<article> <-- Has HW acceleration
[other divs and content]
<div></div>
</article>

<article> <-- Has HW acceleration
[other divs and content]
<div></div>
</article>

になる

<article> <-- Does not have HW acceleration
[other divs and content]
<div style="display:none"></div>
</article>

<article> <-- Does not have HW acceleration
[other divs and content]
<div></div> <-- Has HW acceleration
</article>

<article> <-- Has HW acceleration
[other divs and content]
<div></div>
</article>

タグ全体<article>がハードウェア アクセラレーションを取得するため、サブピクセル アンチエイリアシングが無効になり、 内のすべてのテキスト<article>が粗くなります。

<article>後続の要素がハードウェア アクセラレーションを取得するのを防ぐ簡単な方法はありますか?

4

2 に答える 2

2

さて、私は自分の質問に答えました。これは Webkit (Webkit nightlies で修正済み) のバグで、ハードウェア アクセラレーションされた要素が、position:relative;.

これを修正するには、 を削除するposition:relative;か、または-webkit-font-smoothing:antialiased;を使用します。

私は自分のサイトでそれについての小さな記事を書きました: http://singy.posterous.com/hardware-acceleration-bleeding-into-subsequen

于 2011-04-01T06:47:03.660 に答える
0

これは、ハードウェアアクセラレーションがページ全体でオン/オフに切り替わるのを防ぐために行われていると思います。「ジャストインタイム」で有効になり、その後も継続されます。私の意見では、それはあなたがいじるべきではない（またはいじらなければならない）ものではありません。これは、ブラウザベンダーが変更または更新する（または適切に文書化する）ためのものです。

ハードウェアアクセラレーションを完全に回避したい場合は、3D変換を使用せず、代わりにクラシック画像を使用してください。

于 2011-03-30T19:56:07.773 に答える