Goshawk Posted July 19, 2018 Share Posted July 19, 2018 I'm creating a game based on 16x16 sprites. However, it doesn't scale well in Safari 11. I've attached two images. In Chrome, the sprite looks sharp. However, in Safari, it looks soft. Does anyone have any ideas why this might be happening? Or is Safari incapable of scaling images sharply? Here's my game config: window.onload = function() { var gameConfig = { type: Phaser.AUTO, width: gameOptions.width, height: gameOptions.height, backgroundColor: gameOptions.backgroundColor, pixelArt: true, zoom: 2, autoFocus: true, scene: [BootGame, PlayGame] } game = new Phaser.Game(gameConfig); window.focus(); } Here's my CSS: canvas { /*centre canvas*/ padding: 0px; margin: 0px; display:block; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /*ensure sharp pixel scaling*/ image-rendering: -webkit-crisp-edges; image-rendering: optimizeSpeed; /* Older versions of FF */ image-rendering: -moz-crisp-edges; /* FF 6.0+ */ image-rendering: -webkit-optimize-contrast; /* Webkit (non standard naming) */ image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ image-rendering: crisp-edges; /* Possible future browsers. */ -ms-interpolation-mode: nearest-neighbor; /* IE (non standard naming) */ image-rendering: pixelated; /* Chrome 41 */ } Chrome: Safari 11: Link to comment Share on other sites More sharing options...
samme Posted July 19, 2018 Share Posted July 19, 2018 Safari smooths a scaled WebGL canvas (but not textures) regardless of the image-rendering value. So you can either switch to CANVAS rendering or avoid the zoom setting. Link to comment Share on other sites More sharing options...
Recommended Posts