5

Mac を使用している場合は、http://jsfiddle.net/CVwXV/2/を参照してください。

これを Mac の Chrome または Safari (webkit) で見ると、テキストがはるかに明るい色合い/色にジャンプします。

MacのFirefoxでは問題ありません。

YouTube ビデオを含む html の 2 番目の ARTICLE を削除して再度実行すると、webkit で正常にレンダリングされます。

何か案は？これを行っているのは私のマシンだけではありません。

ありがとう。

編集：アンチエイリアシングと関係があるようです。http://jsfiddle.net/CVwXV/3/ もしそうなら..

-webkit-font-smoothing: antialiased !important;
font-smoothing: antialiased !important;

その後、ジャンプはありません...しかし、それでもFirefoxとChromeでは大きく異なります。左がFF、右がクローム。

デモ

4

3 に答える 3

1

わかりました、私はこれと同じ問題を抱えていて、「大丈夫」な解決策を見つけたと思います。内部に Flash がある iframe にわずかに重なる div がありました。その重複する div は、フォントのスムージングが台無しになっていました。それを修正するにz-indexは、iframe と重複する div の両方を配置する必要がありました。それを機能させるには、iframe を div の上に配置する必要があります (higher z-index)。上記の例では、iframe に重なっている部分はないように見えますが、各要素の境界がわずかに重なっている可能性があります。Safari または Chrome の Web インスペクタを使用して表示できます。しかしz-index、iframe と、フォント スムージングを台無しにした要素を配置することから始めます。

于 2012-08-01T14:27:31.813 に答える
0

私もこの問題を抱えていました。

iFrame を 2 つの div に配置して修正しました。位置を設定した最初の div: 相対、幅: 100%、および高さをプレーヤーの目的の高さに設定します。位置に設定した 2 番目の div: 絶対。

iFrame が絶対位置の div に配置されるようになったため、Safari でのページの読み込み時に、ページ上のテキストが強制的にアンチエイリアスされることはなくなりました。

于 2013-01-10T04:15:54.740 に答える
0

上記のmarkstewieのリンクをたどり、独自のテストをいくつか行いました。試行錯誤の末、私が取り組んでいるサイトでこの問題を修正しました。Safari と Chrome の 3 つの異なるインスタンスで発生していました。

最初のインスタンスは、テキストを含む要素と同じコンテナー内でドロップダウンを表示および非表示にする場合でした。jQuery で .show() が呼び出されるとテキストが軽くなり、.hide() が呼び出されるとテキストが重くなります。

2 番目の例は、テキストを含む固定要素がテキストを含む別の要素と重なった場合に薄くなり、テキストの下のレイヤーが離れると固定要素のコピーが再び重くなりました。

3 つ目は、Flash 要素がページに読み込まれると、フォントが明るくなるというものでした。

テキストが明るくなると、フォントのレンダリングが「サブピクセル アンチエイリアス」から「アンチエイリアス」に変わったようです。設定により、すべてのタイプに「アンチエイリアス」スムージングを強制することにより

-webkit-font-smoothing : アンチエイリアス;

本文では、フォントはページの読み込み時に鮮明で軽いウェイトでレンダリングされ、これらのインスタンスのいずれでも変更されません.

于 2012-08-15T13:48:00.433 に答える