0
html要素の背景画像のぼかしを無効にしたい(スケーリングのために常にピクセル化する必要があります)。私は次のコードを使用しました:Safari -webkit-optimize-contrastが背景画像で機能しない
<div id="chart"></div>
<style>
#chart {
height: 300px;
width: 100%;
background-image: url('image.jpg');
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 300px;
image-rendering: optimizeSpeed; /* Legal fallback */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: optimize-contrast; /* CSS3 Proposed */
image-rendering: crisp-edges; /* CSS4 Proposed */
image-rendering: pixelated; /* CSS4 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
</style>
Safari以外のすべてのブラウザで動作するようです。しかし、の代わりにimg
要素に直接CSSを適用した場合、またはbackground-size
プロパティを削除した場合、Safariで動作します。
2012年にはバグとして報告されていますが、https://bugs.webkit.org/show_bug.cgi?id=97991でも状況は解決しました。