Forums

Sega Master System / Mark III / Game Gear
SG-1000 / SC-3000 / SF-7000 / OMV
Home - Forums - Games - Scans - Maps - Cheats - Credits
Music - Videos - Development - Hacks - Translations - Homebrew

View topic - Blury pixel-art on Firefox (pixelated vs. crisp-edges)

Reply to topic
Author Message
  • Joined: 11 Mar 2018
  • Posts: 55
  • Location: New Zealand
Reply with quote
Blury pixel-art on Firefox (pixelated vs. crisp-edges)
Post 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?
  View user's profile Send private message Visit poster's website
  • Site Admin
  • Joined: 19 Oct 1999
  • Posts: 14652
  • Location: London
Reply with quote
Post 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.
  View user's profile Send private message Visit poster's website
  • Joined: 11 Mar 2018
  • Posts: 55
  • Location: New Zealand
Reply with quote
Post Posted: Tue Sep 07, 2021 4:23 am
Has there been any movement on this?
  View user's profile Send private message Visit poster's website
  • Site Admin
  • Joined: 19 Oct 1999
  • Posts: 14652
  • Location: London
Reply with quote
Post 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.
  View user's profile Send private message Visit poster's website
  • Joined: 29 Mar 2015
  • Posts: 62
  • Location: Japan
Reply with quote
Post 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");
  View user's profile Send private message Visit poster's website
  • Joined: 11 Mar 2018
  • Posts: 55
  • Location: New Zealand
Reply with quote
Post 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.
  View user's profile Send private message Visit poster's website
Reply to topic



Back to the top of this page

Back to SMS Power!