I built a map navigation based on a very big (8000px * 6090px) image of a 1920s very detailed map.

I use an img tag with the very big image, I center it on the focused zone so most of the image is outside of the viewport. I then animate the map with transform and transition css properties.

When the image moves and the hidden parts of the image, outside of the viewport, become visible, they first appear blank before rendering. This bug doesn't happen if I animate the image with margin left and top properties, but then the animation lags a lot.

Any idea of a way to handle this? I tried using "image-rendering" and "will-change" css properties, but it doesn't work. The problem happens with an img tag or a css background-image the same way.