Are hard edges not supported in Safari?
It drives me crazy. I am trying to improve the image quality in pixels and Safari is not playing ball. This is the CSS I am applying to the image:
.avatar {
width: 140px;
height: 224px;
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
image-rendering: pixelated; /* Awesome future-browsers */
-ms-interpolation-mode: nearest-neighbor; /* IE */
}
Now this works fine in Chrome and looks like this:
But in Safari, it makes this blurry mess:
I'm using Safari 8.0 and every thread I've seen says this should work. Not this. It just doesn't. I know there are solutions related to painting on canvas, but let's ... it's 2015, I didn't have to jump over hoops to scale with the most basic scaling algorithms.
+3
source to share
No one has answered this question yet
Check out similar questions: