Crisp rendering on Safari 10.0, macOS.

[Broojo]

I'm making a game that uses pixel art, I'm designing it so that the user can choose to display the game at various screen sizes while maintaining the correct aspect ratio, doubling the number of pixels, 1x, 2x, 3x etc.

I've set the game to use crisp rendering:

Phaser.Canvas.setImageRenderingCrisp(game.canvas);

And set the game scale mode to SHOW_ALL to maintain the aspect ratio when resizing:

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

I've also set the PIXI scale mode:

PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST;

(I tried setting Phaser.Canvas.setSmoothingEnabled(game.context, false); but it gave me an error, never mind)

However the game still looks smoothed when resizing the window in Safari on macOS Sierra, I tested it in chrome and the pixels are crisp as expected.

I tried adding these CSS rules to my internal stylesheet:

image-rendering: optimizeSpeed;             /* Older versions of FF          */
image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
image-rendering: -webkit-optimize-contrast; /* Safari                        */
image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
image-rendering: optimize-contrast;
image-rendering: pixelated;                 /* Awesome future-browsers       */
-ms-interpolation-mode: nearest-neighbor;   /* IE                            */

Again, to no avail. 

Does anyone know of a work-around for Safari? Thanks.

This is for Phaser 2.6.1

[in mono]

game.stage.smoothed = false;

is probably what you're looking for.

[Broojo]

Thanks, I tried that but it is still blurry.

The weird thing is that this JSFiddle displays the image clearly in Safari, all that is required is the 'image-rendering: pixelated;' CSS rule. The attached image shows the canvas in my game, that rule has been applied but it's not working.

So it seems like something in Phaser is overriding it...

EDIT: I fixed it by setting the game mode to be CANVAS rather than AUTO, no WebGL for this game

 

[samme]

Safari doesn't yet support `image-rendering: pixelated` on a WebGL <canvas>.