Hey guys, I rendered images using blender to create a sprite sheet, I centered my sprite sheet using css grids, and this works for pc/desktop, as well as android devices; however the problem occurs for iOS devices (both mobile and ipads), where the sprite sheet is not centered with the grids, and if I want to view it, I have to manually shift it by adding 'left: -270%;' - The problem is that this isn't responsive and hence it's off centered for different mobile devices, any ideas how I can fix this?

Css used:
#sprite {
width: 2500px;
height: 2500px;
position: fixed;
background-size: 100%;
background: transparent url(/images/spritesheetfinal.png);
transform: scale(0.2);
z-index: 2;
transform-origin: top center;
display: flex;
grid-area: 1 / 1 / 3 / 4;
align-items: center;
justify-self: center;
}

.sprite-container {
position: absolute;
height: 100vh;
width: 100vw;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}

.sprite-template {
display: flex;
grid-area: 1 / 1 / 3 / 4;
z-index: 100;
background: url(/images/popupmanifesto.webp) no-repeat/cover;
background-size: 100%;
transform: scale(0.2);
}

Jsx used:
return (
<div className='sprite-container'>
<div id="sprite" ></div>
</div>
)