Pixelated image rendering doesn't work on Firefox

[makeworld]

Follow up from #259.

Describe the bug

Using image-rendering: pixelated doesn't work on Firefox, but it's recommended on the home page.

To Reproduce

Look at the home page avatars on Firefox.

Expected behavior

It renders as pixelated.

Screenshots

Suggestion(s) for fixing this issue

Do something like this instead:

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

Source: https://news.ycombinator.com/item?id=25644485

[Ruedii]

For me it isn't quite that blurry but still antialiases.

I suspect rendering varies by platform and video drivers.

[Rick Measham]

This issue looks like it will be fixed by PR #446

[makeworld]

.pixelated {
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;                 /* CSS4 Proposed  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+           */
}

This supports Firefox, Chrome, Opera, Safari, and IE8+. All the ones I mentioned originally weren't needed. This is what #446 does, although it has an additional line for really old (unneeded IMO) Safari support.