Blur Image On Desktop Chrome browsers

[ocordova]

The zoomed image looks blurry on Chrome Desktop even when using a high quality image. No issue with Firefox or Edge.

[spinningarrow]

Thanks for opening this. I've heard mention of this bug before but had no luck reproducing it. Could you provide some more information (such as your platform/browser version) or even better - a CodePen example where you see this happening?

[ocordova]

I realized that there are also some opened issues in fat's repo... You can reproduce it by opening your demo page (or fat's) with Chrome on a Desktop. I've tested it in Windows w/ Chrome 54.0.2840.34 (64-bit) and macOS Sierra v10.12 w/ Chrome 53.0.2785.116 (64-bit)

Perhaps it is imperceptible for photographs, but images with text make it difficult to read.

[spinningarrow]

Thanks for the information! I'll reply here once I've looked more into it.

[spinningarrow]

Oddly enough, I'm still not seeing this (tried with a textual image). I don't doubt it's happening; I'd just like to reproduce it so I can be sure I've fixed it once I change the code.

[spinningarrow]

These are the images I tried - can you check if you see any blurriness with them?

Image 1

Image 2

Image 3

Also can I have the following information:

1. What is your display size and resolution?
2. Does changing your browser window's size have any effect on the blurriness?

[ocordova]

If I use those images, there is slightly blurriness almost imperceptible 🤔

1. The display sizes that I've tested are 1366x768 and 1600x900
2. No, it does not have any effect on the blurriness.

Can you try with this image or this image?

[marathia]

None of the CSS solutions suggested here and elsewhere worked for me, but this did: in zoom-vanilla.js (lines 189, 189) replace:

var translateY = viewportY - imageCenterY
var translateX = viewportX - imageCenterX

with:

var translateY = Math.round(viewportY - imageCenterY)
var translateX = Math.round(viewportX - imageCenterX)

(inspired on this PR for fat/zoom.js)

[spinningarrow]

@ocordova @marathia I've applied that change ^ in the latest commit. If you have the time, can you test if it fixes the issue? Thank you (and apologies for the long delay in getting this out)!

Uses the change from fat#52

[marathia]

@ spinning arrow This indeed fixes the blurriness, thanks!

[spinningarrow]

Awesome, closing this 💯