On: Ditherpunk: The article I wish I had about monochr...

[greggman3]

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

[vanderZwan → greggman3]

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 → vanderZwan]

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

[londons_explore → greggman3]

Send a patch!