Comment by greggman3

5 years ago

Great article!

Frustrated that Firefox doesn't support "image-rendering: pixelated". FF supports "crisp-edges" and happens to implement that as nearest-neighbor filtering but the spec says that is not the meaning of "crisp-edges".

I don't understand why Firefox is dragging their feet on this. It seems like such an easy thing to add. In fact given their current implementation they could just make `pixelated` a synonym for `crisp-edges` and ship it

Here's the 8yr old issue

https://bugzilla.mozilla.org/show_bug.cgi?id=856337

3 comments

greggman3

Reply
vanderZwan  5 years ago

Here is a cross-browser compatible workaround, courtesy of Gavin Kistner from phrogz.net:

    .pixelated {
      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+           */
    }

And if you want to do pixelated upscaling while drawing an image on a <canvas> element:

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    // turn off image smoothing when upscaling with ctx.drawImage()
    ctx.imageSmoothingEnabled = false;

[0] http://phrogz.net/tmp/canvas_image_zoom.html

[1] https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende...

[2] https://observablehq.com/@jobleonard/gotta-keep-em-pixelated

  • dassurma  5 years ago

    TIL! I just redeployed with these styles added. Should be live in a couple minutes. Thank you.