- Joined: 11 Mar 2018
- Posts: 71
- Location: New Zealand
|
Blury pixel-art on Firefox (pixelated vs. crisp-edges)
Posted: Mon Mar 29, 2021 3:30 am
|
On the home page, there is pixel art, "In Pixels We Trust".
On Chrome this renders correctly, with sharp pixels.
On Firefox however, this is a blurry mess.
The problem comes down to the two browsers using different CSS values for the same behaviour:
* Chrome works with: image-rendering:pixelated;
* Firefox works with: image-rendering:crisp-edges;
This can be made to render correctly on both Chrome and Firefox by specifying both values. Unsupported values are ignored, and the last supported value is the one that is used:
img.scalefix {
image-rendering:crisp-edges;
image-rendering:pixelated;
}
Is this a change that could be made?
|
- Site Admin
- Joined: 19 Oct 1999
- Posts: 14762
- Location: London
|
Posted: Mon Mar 29, 2021 6:35 am
|
This fix is already in an upcoming site update. We had to roll our own JavaScript upscaler because this CSS feature didn’t exist when we made it, but clearly it’s lost some compatibility over the years.
|
- Joined: 11 Mar 2018
- Posts: 71
- Location: New Zealand
|
Posted: Tue Sep 07, 2021 4:23 am
|
Has there been any movement on this?
|
- Site Admin
- Joined: 19 Oct 1999
- Posts: 14762
- Location: London
|
Posted: Tue Sep 07, 2021 7:23 am
|
It’s been ready to go for months but I haven’t found the time, sorry. I’ll try to do something in the coming weeks, I guess I need to take a day off work to give it the attention it needs.
|
- Joined: 29 Mar 2015
- Posts: 67
- Location: Japan
|
Posted: Tue Sep 07, 2021 8:09 am
|
I use this simple Greasemonkey user script as a temporary solution on Firefox.
// ==UserScript==
// @name Crisp image
// @version 1
// @grant none
// @include https://www.smspower.org/*
// ==/UserScript==
document.getElementsByClassName("scalefix")[0].setAttribute("style","image-rendering:crisp-edges");
|
- Joined: 11 Mar 2018
- Posts: 71
- Location: New Zealand
|
Posted: Wed Oct 27, 2021 9:02 pm
|
It looks like after the latest update, Firefox now supports
image-rendering: pixelated;
So crisp-edges is no-longer required to give the correct appearance.
|