New upscaling/zoom behaviour causes blurry images (Panzoom)

[amkdev]

If I'm not completely wrong, the behavior of how images are scaled to 100% has changed in comparison to fancybox 3.

Fancybox 4 uses now css transform and scales the image up to - for example - scale(1.4066). This causes naturally a little blurred image also if the calculation is right and the scaled image corresponds 1:1 to the natural image size.

It's the browser's transform scale rendering that blurs the image and after a lot of research about this, this can't be fixed with css tweaks.

The lower the screen resolution, the more the problem appears:

left fancybox 4, right the image url opened

At the end this is very sad for all user who want to show her images on mobile devices with panzoom functionality.

The solution could only be another way to reach the 1:1 / zoomed view of an image - without any css transform upscaling.

[fancyapps]

Hi,

Thanks for the report, I'll look into this.

[fancyapps]

What device are you using and could you, please, check with the latest release? Now to me it looks good using iOS.

[amkdev]

iPhone 8

This may be less noticeable with ultra-sharp images with less detail, but it is noticeable even on the desktop.

I have also criticized this on lightGallery 2. There the 100% scaling is realized in the same way ...

Imho the 1:1 view should be better a css transform scale(1) or none css transform. Only this way the full quality of image is provided via browser's rendering.

The following screenshot comes from the lightGallery 2 demos

Currently I have resigned myself to the problem. But it's a pity that especially on mobile devices, the image quality is poor enlarged ergo in 100% ...

You can test it here
https://fancyphotos.alexander-korn.de/de/__home__/india-2014
all images looses sharpness in 100%

The only vanilla js lightbox doin' it better and shows the "pure" 1:1 view in zoom is currently GLightbox but lacks in other features.

[amkdev]

with alpha 4 fancybox behaves really slow in Safari and causes some filter (shadow) re-draw artifacts after zoom out. never seen something like this … of course the style of fancybox is a bit special. As said I adopted this from your showcase example.

since the loss of sharpness isn't a special Safari thing imho, I could not notice an improvment with alpha 4

[fancyapps]

Well, it works beautifully on desktop browsers, but Safari is such a disappointment. Looks like I have no choice but to change the logic of how the animations work.

[amkdev]

very big thanks that you take care of the matter.

another sceenshot taken with chrome/desktop

[fancyapps]

That puzzles me, I do not see any blurriness on Desktop/Chrome. Maybe this is combination of your screen DPI and browser zoom level? Anyway, I'll think it will be solved along with Safari.

[amkdev]

No unusual settings on my side.
Two monitors 2560x1440 and 1920x1200.
macOS Catalina. window.devicePixelRatio is 1

Ok - I'm on a Hackintosh but why this should make a difference in css-scaling?

[fancyapps]

The first beta was released today, could you, please, check how it works for you? Images now have a fixed width/height after the end of the animation.

[amkdev]

Sorry for the late reply. Tried the latest version on another project now. Zoomed images are no longer blurry! Thanks!