Nes.css: Pixelated image rendering doesn't work on Firefox

Created on 1 Feb 2021  路  2Comments  路  Source: nostalgic-css/NES.css


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

image

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

bug

Most helpful comment

This issue looks like it will be fixed by PR https://github.com/nostalgic-css/NES.css/pull/446

All 2 comments

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

I suspect rendering varies by platform and video drivers.

This issue looks like it will be fixed by PR https://github.com/nostalgic-css/NES.css/pull/446

Was this page helpful?
0 / 5 - 0 ratings

Related issues

BcRikko picture BcRikko  路  6Comments

trezy picture trezy  路  6Comments

YuK1Game picture YuK1Game  路  6Comments

evexoio picture evexoio  路  3Comments

tuxun picture tuxun  路  4Comments