11

状況：

jsFiddleを表示する

Iの中には、900divの画像が続く画像があります。font-weightローカルでホストされている環境では、カスタムフォントを使用していますが、上記のフィドルでは、「非常にスタイリッシュな」ComicSansを選択して自分の主張を説明しました。何かが起こる前に、div全体の不透明度を0.7に設定しました。ただし、にカーソルをdiv合わせると、すべての不透明度が完全に不透明になるようにします。

問題：

Webkitブラウザのみ（SafariよりもChromeの方がわかりやすい）で、divタグのオンとオフを切り替えると、テキストの太さが変化するように見えることに気づきました。実際には、もちろんテキストの太さにはまったく変化はありません。ただし、詳しく確認すると、テキストはホバーしたときにのみ希望の太さで表示され、ホバーされていない状態では表示されないことがわかります。

私がしたこと：

  • Chrome、Firefox、Safariのすべての最新バージョンでこれをテストしました。
  • 私は現在、これを新しいMacBook Pro（私の場合は網膜スクリーン）でテストしています。しかし、私の隣の同僚は、彼女のiMac（網膜以外のディスプレイ）でフィドルをテストしただけで、問題がまだ明らかであることがわかりました。
  • たぶん私はただ頭がおかしいのかもしれませんが、これは実際にはWebkitブラウザーがさまざまな不透明度の要素をレンダリングする方法を選択する方法かもしれないと感じています。繰り返しになりますが、それは私が何か間違ったことをしたことを認めないようにしようとしているだけかもしれません。

そして当然、ComicSansで気分を明るくできると思いました。問題を説明するのに役立つスクリーンキャプチャを次に示します。

Comic Sansを受け入れましょう！

4

2 に答える 2

24

不透明度自体の問題ではありません（実際、@ Zoltanの例で不透明度を1に戻しても、私にとっては何も変わりません）。

問題はトランジションにあり、webkitが使用できるアンチエイリアシングモードは2つあります。

  1. サブピクセル（デフォルトですが、アニメーション、トランジション、または変換中はサポートされていません）または
  2. グレースケール

つまり、要素がサブピクセルアンチエイリアスを使用してレンダリングされ、アニメーションが適用されると、Webkitはアニメーションの期間中一時的にグレースケールに切り替わり、終了するとサブピクセルに戻ります。

サブイクセルアンチエイリアシングの結果、フォントフェースがわずかに重くなることを考えると、不要なアーティファクトが発生します。

この問題を解決するには、これをcssに追加します。

html {
    -webkit-font-smoothing: antialiased;
}

これにより、グレースケールアンチエイリアスとすべてのテキストが強制され、切り替えが表示されなくなります。

（最終結果： http： //jsfiddle.net/ErVYs/9/）

于 2012-08-25T09:57:49.563 に答える
13

1考えられる解決策は、不透明度をにではなく、.999-http ://jsfiddle.net/ErVYs/2/に移行することです。

div {
    width: 200px;
    text-align: center;
    opacity: 0.7;
    transition: opacity ease-in 0.25s;
    -webkit-transition: opacity ease-in 0.25s;
    -moz-transition: opacity ease-in 0.25s;
    -o-transition: opacity ease-in 0.25s;
}

div:hover {
    opacity: .999;
}
于 2012-07-09T20:57:08.037 に答える