8

Firefox では問題ありません。画像は次のとおりです。

http://cl.ly/3R0L1q3P1r11040e3T1i

Safari では、テキストのレンダリングが不十分です。

http://cl.ly/0a1101341r2E1D2d1W46

IE7 & IE8 ではもっとひどいのですが、写真がありません。ごめん ：（

Isotope jQuery プラグインを使用していますが、CSS3 トランジションが原因でフォント レンダリングが低下しているようです。

Google Font API も使用しています。

Isotope の CSS トランジションは次のように記述されます。

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}

.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}

.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}

これについて何か助けていただければ幸いです。Firefoxで見栄えがします！

ありがとう！

4

2 に答える 2

4

IE のことは少し忘れて、-webkit-font-smoothing プロパティを .isotope-item スタイル定義に追加できます。このような：

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity;
  -webkit-font-smoothing: antialiased
}

その理由は、3D トランジションのサポートと関係があるようです。Isotope は、Modernizr を使用して 3D トランジションのサポートを自動的に検出し、「translate」ではなく「translate3d」を使用します。私が本当に欲しいのは：

-webkit-font-smoothing: subpixel-antialiased

しかし、これは Chrome でのみ機能するようで、Safari は以​​前の状態に戻ります。明確にするために、Chrome ではアンチエイリアスの問題は発生しませんが、上記のスタイル定義は尊重されます。

同位体のソースを変更して、このフォント スムージング定義を 3D 変換をサポートするブラウザー (つまり、Safari) にのみ追加し、Chrome をそのままにしておくことを検討しています。

于 2011-03-25T01:02:30.220 に答える
0

残念ながら、実際にできることは何もありません。これは、IE が不透明度を作成するために使用するアルファ フィルターに関係しており、私はそれに対する修正を見たことがありません。

于 2011-02-27T23:22:07.417 に答える