CSS3の高さの画像がぼやけます

私はサイトを開発しており、デモはhereです。私が直面している問題は、スクロール中にロゴの高さが減少するときです。ほとんどの時間がぼやけます。同じことが再びスクロールアップし、ロゴが元のサイズに復元されます。これはChromeとIE（Edge）で発生しますが、Firefoxでは正常に動作します。CSS3の高さの画像がぼやけます

CSS3のトランジションが適用されているために起こっていると思います。私がトランジションを削除すると、それはうまくスケールされます。

transition: all 0.3s ease-in-out; 
    transition-property: all; 
    transition-duration: 0.3s; 
    transition-timing-function: ease-in-out; 
    transition-delay: initial;

遷移が適用されるプロパティはheightです。当初

：スクロール時height: 3.125rem; ：height: 2.375rem;

私はhere与えられた、以下を追加しようとしましたが、それはうまくいきませんでした。実際には、次のように追加すると、スクロールしなくても画像が少しぼやけて表示されます。

-webkit-backface-visibility: hidden; 
-webkit-transform: translateZ(0) scale(1.0, 1.0);

も：

-webkit-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0);

出典

2016-08-25 Fahad

あなたのロゴが2千分の2ピクセルを超えていることをご存知ですか？ –

ラスタイメージのサイズを変更すると、必然的にぼやけが発生します。代わりにベクターグラフィックス（SVG）を使用することを検討してください。 –

明確にするために、私がそれを指摘している理由は、ブラウザがあなたのためにイメージのサイズを変更するためだけに行うことができるということです。 4つの異なる縮小方法があるフォトショップではありません。ラスタライズされた画像は、最終的な150ピクセル〜200ピクセルのサイズに近いスケーリングされたバージョンを再アップロードすると、はるかに良く見えます。 Photoshopや他の画像エディタに、クライアント側のブラウザではなくスケーリングを把握させる。 Maratが指摘しているように、ベクターも良いアイデアかもしれません。 –

ブラウザはあなたのために画像のサイズを変更するので、多くを行うことができます。 4つの異なる縮小方法があるフォトショップではありません。 150px〜200pxの最終サイズ（おそらく200pxの範囲）に近い縮尺のバージョンを再アップロードすると、ラスタライズされた画像がより見栄えがよくなるでしょう。 Photoshopや他の画像エディタに、クライアント側のブラウザではなくスケーリングを把握させる。 Maratが指摘しているように、ベクターも良いアイデアかもしれません。

出典

2016-08-25 20:47:29

CSS3の高さの画像がぼやけます

答えて

関連する問題