3 ms·

Great article! Frustrated that Firefox doesn't support "image-rendering: pixelated". FF supports "crisp-edges" and happens to implement that as nearest-neighbo

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 https://bugzilla.mozilla.org/show_bug.cgi?id=856337

londons_explore 6y ago
Send a patch!
vanderZwan 6y 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 http://phrogz.net/tmp/canvas_image_zoom.html [1] https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende... [2] https://observablehq.com/@jobleonard/gotta-keep-em-pixelated https://observablehq.com/@jobleonard/gotta-keep-em-pixelated
- dassurma 6y ago
  TIL! I just redeployed with these styles added. Should be live in a couple minutes. Thank you.

londons_explore 6y ago

Send a patch!

vanderZwan 6y 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 http://phrogz.net/tmp/canvas_image_zoom.html [1] https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende... [2] https://observablehq.com/@jobleonard/gotta-keep-em-pixelated https://observablehq.com/@jobleonard/gotta-keep-em-pixelated

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