Anti-aliasing on Safari/Webkit browsers

Hi, I would like to highlight an issue that occurs when HTML exports run in Safari on macOS and I believe the WebKit browsers on iOS.

If you export a pixel-perfect game with scaling set to Nearest Neighbor, somehow this setting is not honored in these browsers when you scale the game to anything not the original size (e.g. going full screen). Non-WebKit browsers such as Chrome and Firefox on desktop are fine and the scaled game preserves hard edges on the images accordingly.

From other forums, it seems the CSS property “image-rendering: pixelated” works in Safari/WebKit, but it doesn’t apply it to the Canvas element when it is, say, going to full screen from the original smaller defined size, resulting in blurry anti-aliasing at full screen.

I believe Safari/WebKit handles this CSS rule differently from other browsers and is not inherently a GDevelop issue.

However, I’ve tried some other HTML games made with frameworks such as GB Studio and Defold on and somehow their games manage to still preserve the nearest neighbor scaling when going full screen on Safari/WebKit.

Fixes I’ve seen used by other frameworks seem to change these parameters to the canvas.

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

I see that some of these are already in the Pixi runtimegame renderer, so I’m not sure why it’s not working.

Thank you for pondering this and have a good New Year.

Hello :wave:

Thanks for you report and research in the matter!
I think you’d better report that to the PIXI JS team, as we are relying on it for handling this kinds of things. It would also help other software that use PIXI. Thanks again!

Hi, I’ve checked the Pixi JS boards and it seems this is a Safari/Webkit issue, primarily with how the browser treats zooming, which is what happens when going full screen.

A quick way to test this is to output a simple HTML export with scaling set to Nearest at a very small size (e.g. 180 x 180 pixels) and then using a browser to zoom the size. On Chromium and Firefox browsers, the edges remain as hard edges with no anti-aliasing, while Safari/Webkit makes the zoom blurry.

Pixi JS only handles the scaling at the Canvas level, so I assume the other browsers infer it from the canvas settings and honor it, while Apple doesn’t. Could there be a call that Webkit looks for to handle zooming that maintains the nearest neighbor scaling?

I don’t have a solution since this could be something only Apple can fix. But to everyone making pixel-perfect games, please be aware that Apple device users may be getting blurry looking images when they play your HTML web game at anything but the original small size. (Desktop exports are fine as they use Chromium via Electron.)

Again, thank you for looking at this and Happy 2022!

1 Like

I posted about this a couple of years ago (link)…too bad Safari still hasn’t gotten its act together!

As a graphic designer first and a game developer second, this drives me nuts. But I take some small comfort in knowing that 1) most people don’t play the game on Safari, and 2) even if they do most people don’t have a trained enough eye to notice the fuzziness.

Yes, most people don’t use Safari on desktop, but quite a number do on iOS (and I think all Webkit browsers are affected). Although on small screens, the blur is not as bad.

However, I am curious how some of the other game frameworks like Defold are able to pull it off considering everyone has to use the canvas element to display the game. Frameworks like Godot use WebAssembly for HTML so that has its own rules, but I believe Defold is regular HTML/CSS/JS.

My only proposal is to have GDevelop output an export with the canvas element already expanded to a fullscreen size, say 1080p. It will have to be a setting at export that is sort of like the Window size setting, just specific to HTML exports. In other words, avoiding Safari zooming up and instead only zooming down (which will still have anti-aliasing but shrinking is not as terrible).

Personally, this is too much work to impose on the GDevelop team for a matter that is really Apple being Apple and I feel bad for even suggesting it.

thank you for the information. i will be sure to put in my game descriptions that people might get blurriness on safari. i think that is about all any of us can do.