I let the user pick an image, I convert the resulting File object to an ImageBitmap using createImageBitmap(), I render that ImageBitmap onto a <canvas> with no scaling applied, then I upscale that canvas using CSS by saying:

canvas{
    transform-origin: top left;
    transform: scale(2);
    image-rendering: pixelated;
}

When I select a .png file containing pixel art where every pixel in the .png is exactly one pixel in the pixel art (this is the image I'm using, for reference), I expect that scaling this .png up by any integer value should create an image where each pixel is consistently square. In this case, going from 1x1 to 2x2.

However for some reason my result looks like this:

Notice how some pixels are rendered 1x1, others 2x2, and some even appear to be 1x2 or 2x1. Why is this happening?

Snippet to further demonstrate issue:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const img = document.createElement("img");
img.src = "https://oops-studio.com/downloads/demospritesheetforso.png";// I'm confortable using a remote image as the source here since I own this domain and can guarantee that the image will not be removed

img.addEventListener("load", () => {
  canvas.width = img.width;
  canvas.height = img.height;

  ctx.drawImage(img,0,0);
});

body{
  background: black;
}
canvas{
  transform-origin: top left;
  transform: scale(2);
  image-rendering: pixelated;
}

<canvas id="canvas"></canvas>

After some more testing it seems to be an issue with my PC in some way. I tried it in both Opera and Edge (don't have anything else installed) and it was consistently incorrect. I tried it on another machine (in Opera) and it works perfectly.

Any ideas as to why that is?