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: crisp pixels

But in Safari, it makes this blurry mess: 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





All Articles