Bad image quality of maps after zooming in

[nick-traeger]

Describe the Issue

Hello, unfortunately, the images of maps are displayed by the browser (tested in Chrome on PC and on Safari on iPad) much worse than the original would allow. You can see this very well when you scroll into the images.

Expected Behavior

Image quality should be the same as the original.

To Reproduce

Open any map and zoom in. Compare this to the original image.

Client

Desktop

Browser

Chrome

Relevant Console Log Output

No response

Extra Information

If you apply image-rendering: pixelated; to the img tag of the map it is a bit better.

[Shebuka]

Is this happening only on iPad? I've just tried it on my Mac in Chrome and the image loads correctly at full resolution.

[nick-traeger]

No, on my computer (windows and linux) too. It loads the right image but it renders with bad quality.

[Shebuka]

Very strange... We are doing a transform of the image to make it freely zoomable and there is an issue that you can't have a 100% zoom 1:1 pixel with the original (cause it's calculated as starting point at 1x relative to the available screen size).

This is what I see right now:

Can you see if there are any error in script loading in the console of the developer tools?

p.s. link to the page for ease of access: https://tarkov.dev/map/woods-3d

[nick-traeger]

No errors in the console.

The left side of your image is more blurry than the right side.

Again, a screenshot from a friend's Mac:

[Shebuka]

The left side of your image is more blurry than the right side.

Yes, that's the issue I was referring to as not 100% zoom. You can see that both images are aligned to the bottom but that the labels' area ends slightly lower on the left side, that's because it shows the image at like 98% zoom.

@GrantBirki can you look into this?

[GrantBirki]

I'm on Linux (Ubuntu) and just tested between the source image and the zoomable web image. I could not see any difference as far as my eyes go :eyes:

Left is web (zoomable) - Right is source image

---

I went ahead and purged our entire Cloudflare CDN in the off chance that something is up with caching.

[GrantBirki]

That blurriness in the screenshots above is super weird honestly. I have not seen something like that before except in photo editing software when someone applies a blur filter to an image

[nick-traeger]

I think this is the problem: https://github.com/prc5/react-zoom-pan-pinch/issues/248

[GrantBirki]

@nick-traeger That looks like it is indeed the issue. I wonder if there is an alternate npm package we can use instead? Seeing as that bug has been open for a while without any traction