Soft images in Safari

[Goshawk]

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:

[samme]

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.