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
html css safari image pixel


source to share


No one has answered this question yet

Check out similar questions:

431
Placing a border inside a div, not along its edge
423
Array state will be cached in iOS 12 Safari. Is this a bug or a feature?
313
How do I disable a link to a phone number in Mobile Safari?
38
Image scaling with CSS: is there a webkit alternative for -moz-crisp-edge?
23
Why do images lose quality after context rotation?
4
Can I turn off smooth scaling for Safari images?
0
Browsers, css and image alias
0
How to fix blurry form edges in HTML5 canvas?
0
SVG path showing the bottom edge at specific viewport widths
0
Accelerating images on Retina devices



All Articles
Loading...
X
Show
Funny
Dev
Pics