css - Chrome Mac で非常に小さい PNG がうまくレンダリングされない

Question

Photoshop CS6 から PNG-24 をエクスポートしましたが、Chrome では次のように表示されます。

三角形の周りに白い線が見えます。

同じ PNG が他のブラウザで正しくレンダリングされます。firefoxでのレンダリングはこんな感じ。

Answer 1

私はこれとまったく同じ問題を抱えています。コントラストがほとんどない場合、Chrome は「問題を解決」しようとします。

何度も歯ぎしりした後、次のことを追加することがわかりました。

    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */

問題要素のcssに問題を解決しました。

また、同様の問題を扱っているこの投稿を参照してください: https://superuser.com/questions/530317/how-to-prevent-chrome-from-blurring-small-images-when-zoomed-in .