I'm working on a project using React where I render individual pixels as elements (or in some cases). However, on mobile devices, some pixels appear distorted—they stretch into rectangles rather than staying as perfect squares.

Here’s a simplified snippet of how I render each pixel:

<div
    style={{
        position: "absolute",
        top: pixelPosition.y * PIXEL_SIZE,
        left: pixelPosition.x * PIXEL_SIZE,
        width: `${PIXEL_SIZE}px`,
        height: `${PIXEL_SIZE}px`,
        backgroundColor: `${selectedColor}`,
        boxSizing: "border-box",
        pointerEvents: "none",
        imageRendering: "pixelated"
    }}
/>

Even though PIXEL_SIZE is set to 1px, some pixels appear stretched on certain mobile screens.

I’ve attached an image showing the issue.

Desktop	Mobile