<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body>
<p>
<div>
<b><a class="bz_bug_link
bz_status_NEW "
title="NEW - Retina-ready images appear soft and blurred on non-retina displays"
href="https://bugs.webkit.org/show_bug.cgi?id=157123#c1">Comment # 1</a>
on <a class="bz_bug_link
bz_status_NEW "
title="NEW - Retina-ready images appear soft and blurred on non-retina displays"
href="https://bugs.webkit.org/show_bug.cgi?id=157123">bug 157123</a>
from <span class="vcard"><a class="email" href="mailto:ashleykaryl@gmail.com" title="Ashley Karyl <ashleykaryl@gmail.com>"> <span class="fn">Ashley Karyl</span></a>
</span></b>
<pre>After a day of research I found that adding this CSS to the page helps the situation, though it looks better in Chrome than Safari.
/* applies to Jpg images; avoids blurry edges */
img[src$=".jpg"], img[src$=".jpg"] {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
This should not be necessary and Firefox is rendering retina-ready images much better on non-retina displays without these changes.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>