Blurry zoomed image in Chrome and Safari (OS X)

[Jugibur]

See this comparings (right Firefox, left Chrome and similar Safari):

This is, after clicking the image, loaded an highres image

[terrymun]

When opening issues like this, please, create a minimal, concrete and verifiable example. There might be many other factors that influence how the image is rendered.

As long as this effect cannot be reproduced in the Fluidbox demo, it is likely due to a specific combination of styles beyond my control that lead to blurring.

[Jugibur]

Ok, I've made a minimal demo, with nearly no additional css and could reproduce the issue.
Please see:
Fluidbox-blurred-image-demo.zip

[terrymun]

I unfortunately do not see what is wrong. The text is the linked PNG image is already blurry to begin with, and of course when it is opened in Fluidbox, it will remain blurry.

[Jugibur]

Mmm, the thumbnail is another image file then the enlarged file.
So that should not the issue, but only the enlarged image.
But if you dont' see any difference in the different browsers, the issue may be in my system.

Nevertheless thanks for your help and of course for your effort on Fluidbox!

[terrymun]

From the different images I see, the blurring is not due to CSS scaling, but probably how browsers interpolate images. Odd values in CSS transforms should have no impact on the clarity of the images, because everything is passed on to the GPU, which interpolates the images and redraws it.

[Jugibur]

Ok, thanks for your clarification. Perhaps / hopefully this browser issue may gone in the future...

[roelvanduijnhoven]

I am also experiencing this on Chrome! Firefox is showing it perfectly.

In my use case the image shown as thumbnail and the one enlarged are using the same image source.

When I inspect the image when it is enlarged I see that it has a width of 799.8 instead of 800. Due to the scaling I suppose. This could be related to it.

However when I adapt the scaling values so the dimensions are correct (800x600) using the Chrome dev tools it still looks blurred.

[roelvanduijnhoven]

Any update on this? We're still experiencing this bug.

[terrymun]

I am sorry for the slow reply, but I am currently extremely busy right now, and am unfortunately unable to devote any resources to fixing this issue. Again, I am unable to reproduce this issue on OS X, on Chrome, Firefox and Safari.

I am open to any PRs that can resolve this issue.

[dbalders]

I had this issue, but was on 1.4.3. Updated to latest release and it is now working just fine

[Gaya]

I've created two demo pages. One has the blurry zoom and the other is crisp. I've dug into in for quite some time yesterday, but couldn't really pinpoint what the difference between the two situations were.

Hope this will help others:

http://fluidbox-crisp-safari.jouwweb.nl
http://fluidbox-blurry-safari.jouwweb.nl

[terrymun]

Ok, I manage to narrow it down to an issue that has specifically to do with overlapping/positioning of the overlay and the image.

I have made some tests (on the blurry example that @Gaya provided) and summarised the results, performed on macOS Sierra Safari v10:

Scenario	Outcome
No modifications	Blurry
Remove z-index on .fluidbox__overlay (so that overlay covers the ghost image)	Not blurry
Collapse the dimensions of .fluidbox__overlay so that either x/y axis has a length of 0	Not blurry
Use full width of overlay, but 1px in height (not overlapping ghost image)	Blurry
Use full height of overlay, but 1px in width (not overlapping ghost image)	Blurry
Use explicit width/height specifications instead of top/bottom/left/right properties on overlay	Blurry
Manually adjust the z-index of the scaled up ghost element	Blurry

Therefore it seems like some kind of rendering issue with Safari is causing the browser to render the scaled up image blurry when...

1. An element with a z-index specified is present within the vicinity of the transformed ghost element
2. An element has a non-zero dimension in either x/y axis is present within the vicinity of the transformed ghost element

...even though it shouldn't be doing as such. The cause remains elusive though.

Perhaps here are some steps that can further help to pinpoint the source: take out all the styles on the problematic page, sans the Fluidbox base styles. Progressively re-add rules to your stylesheet (may I suggest the 50:50 method, where you add half of the removed rules back for each iteration), and see at which point the blurry phenomenon reappears. However I do acknowledge this approach might not be optimal for detecting some strange interaction between CSS rules that causes this manifestation.

[Gaya]

Thanks for the thorough summary. I was planning to do the CSS method you're suggesting before, but wanted to share the problematic templates first.

Will try to narrow the problem down and will report back after.