Why is camera.zoom different in CANVAS / WebGL?

[s4m_ur4i]

Today I got a headache from how... why... phaser3 handles the camera.setZoom();
- First thing I learned: all bodies need to be recalculated after .setZoom.

- in WebGL works as expected.
- in Canvas, Tilemaps are huge, the zoom isn't on point and even by recalculating the bodies, collision is way off.

This could be reproduced by using this code and setting WebGL / Canvas.
The code behaves differently depending on which you choose, and neither of both has a valid result.

Am I missing something?

Game config:

// Game config
type: Phaser.WEBGL,
			width: WIDTH,
			height: HEIGHT,
			scene: Level,
			resolution: 1,
			pixelArt: true,
			antialias: false,
			hidePhaser: true,
			roundPixels: true,
			backgroundColor: '161C22',
			zoom: 1,
			physics: {
				default: 'arcade',
				arcade: {
					gravity: {
						x: 0,
						y: 250
					},
					debug: true
				}
			},

tilemaps and camera:
 

// Tilemap method
setMap() {
		// # Add Tilemap
		this.config.map = this.make.tilemap({
			key: 'map',
			tileWidth: 8,
			tileHeight: 8
		})
		const tileset = this.config.map.addTilesetImage('tilemap');

		// # Add Tilemap Layers
		this.config.layers.background = this.config.map.createDynamicLayer(0, tileset);
		this.config.layers.midground = this.config.map.createDynamicLayer(1, tileset)
		this.config.layers.ground = this.config.map.createDynamicLayer(2, tileset);
		this.config.layers.forground = this.config.map.createDynamicLayer(3, tileset);
		this.config.layers.water = this.config.map.createDynamicLayer(4, tileset);

		// # Configure Tilemap Layers
		// replace with array of actual bodies this.config.layers.ground.setCollisionBetween([]);
		this.config.map.objects[0].objects.forEach((obj)=>{this.setMapObject(obj)});

		// # Configure z indexes
		this.config.layers.background.setDepth(0);
		this.config.layers.midground.setDepth(1);
		this.config.layers.ground.setDepth(2);
		this.config.layers.objects.setDepth(3);
		this.config.layers.enemies.setDepth(4);
		this.config.layers.player.setDepth(5);
		this.config.layers.effects.setDepth(6);
		this.config.layers.water.setDepth(7);
		this.config.layers.forground.setDepth(8);
		this.config.layers.overlays.setDepth(9);
		this.config.layers.ui.setDepth(10);

		this.setTransition();
	}




// # Configure main camera
const m = this.config.map;
this.physics.world.setBounds(0, 0, m.widthInPixels, m.heightInPixels, true, true, true, true);
this.cameras.main.setBounds(0, 0, m.widthInPixels, m.heightInPixels);
this.cameras.main.setZoom(8);
this.cameras.main.setRoundPixels(true);
this.cameras.main.useBounds = false;
this.config.layers.ground.setCollisionBetween(0, 8000);



// add sprites
this.config.player = new Player({ scene: this, x: 20, y: 30});
this.cameras.main.startFollow(this.config.player);
this.physics.add.collider(this.config.player, this.config.layers.ground);

Any thoughts, on this, would be helpful.