Scale CSS sprite pixel art without image smoothing

Question

I am trying to scale up css sprite pixel art images and want to COMPLETELY disable the anti-aliasing/image smoothing.

Per this post here: Disable antialising when scaling images I have tried the following css

image-rendering: optimizeSpeed;            
image-rendering: -moz-crisp-edges;         
image-rendering: -o-crisp-edges;           
image-rendering: -webkit-optimize-contrast; 
image-rendering: optimize-contrast;       
-ms-interpolation-mode: nearest-neighbor;   

It worked exactly like I wanted in firefox, however in Chrome and I.E. it helps a little, but some image interpolation/smoothing/anti-aliasing is still occuring.

I am not wanting to use a canvas element, but rather just stick with the CSS background image sprites.

Is there a way to accomplish the same results as the “-moz-crisp-edges” in the other browsers?

Answer 1

The bad news:

Unfortunately, it looks like your options are either using the canvas, using JavaScript, or living with anti-aliasing in Chrome and I.E.

Here are some responses that might help you with one of the other two if you don't choose to live with the anti-aliasing:

Links:

1. Javascript-Only Solution - Old, slow, but works everywhere
2. Canvas solution - New, quicker, doesn't work in non-compliant browsers

Sorry there isn't better news for you on this.