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.

[Gaya]

I seem to have found out what's happening, and I am not liking this at all.

Seems like there are some wrapping containers which have padding this caused the .fluidbox__overlay to be not positioned correctly. Safari is not taking top into account and tries to put the overlay on bottom. What happens is that I in some cases see the overlay not fully stretched to the top.

To fix this I added a negative top and bottom value. This seemed to fix the blurry image.
What you are about to see is not pretty, but it fixes the Safari bug:

.fluidbox__overlay {
    top: -100%;
    bottom: -100%;
}

Beware: if there is more padding then 200% of the screen's height this will again fail...

So far I can't see any strange behaviour in other browsers when I apply this "fix".

I can add a pull request if you want me to apply this to Fluidbox by default.

[terrymun]

That is indeed a very strange bug with regards to the rendering engine Safari is using, but I'm relieved that you found a fix! An issue with me is that people report issues of blurry images but failed to provide a workable example that I can help diagnose, but you definitely did.

For the padding issue, do you mean extraneous padding added to any of the injected Fluidbox elements (that are beyond the base styles provided for Fluidbox), or in one of the ancestor nodes?

Sure, send a PR this way and I'll merge it.

[Gaya]

It was our containers with extra padding (and I think some other conditions) that cause the overlay not to be displayed correctly and thus causing the image blur bug. Almost feels like something went wrong in Safari and the next step, to render the image, is ignored.

Will add a PR for the fix!

[sandrowuermli]

i Still have problems with Safari on Desktop (Version 10.1.2 (12603.3.8)) but i found a global solution.
Let's start with SCSS:
First i removed the opacity from the overlay to remove the blur:

.fluidbox__overlay {
	opacity: 0 !important;
}

Next up, i set the overlay as before: to the highest element from the Fluidbox: The Fluidbox itself:

$fluidbox-transition-time: .3s;
.fluidbox:before {
	transition: background #{$fluidbox-transition-time} linear,
							opacity #{$fluidbox-transition-time} linear;
	content:    '';
	display:    block;
	background: rgba(255, 255, 255, 0);
	opacity:    0;
}

.fluidbox.custom-fluidbox--opens:before,
.fluidbox.custom-fluidbox--opened:before {
	transition:     background #{$fluidbox-transition-time} linear,
									opacity #{$fluidbox-transition-time} linear;
	opacity:        1;
	content:        '';
	display:        block;
	position:       fixed;
	top:            0;
	right:          0;
	bottom:         0;
	left:           0;
	background:     rgba(255, 255, 255, .5);
	z-index:        1000;
	pointer-events: none;
}

.fluidbox.custom-fluidbox--closes:before {
	transition:     background #{$fluidbox-transition-time} linear,
									opacity #{$fluidbox-transition-time} linear;
	opacity:        0;
	content:        '';
	display:        block;
	position:       fixed;
	top:            0;
	right:          0;
	bottom:         0;
	left:           0;
	background:     rgba(255, 255, 255, 0);
	z-index:        1000;
	pointer-events: none;
}

Note that i initialized every element with .fluidbox class as a fluidbox.
I use fluidbox in wordpress, so i can add the fluidbox class to an image too, wordpress surrounds it automaticaly with the link.
In my case i use JavaScript to handle this:

	var $fluidboxImage = $( 'img.fluidbox' );
	$fluidboxImage.closest( 'a' ).addClass( 'fluidbox' ).fluidbox();
	var $fluidbox = $( 'a.fluidbox' );
	$fluidbox.fluidbox();

At least, i use the fluidbox eventhandler to add the classes i need:

	$fluidbox.on( 'openstart.fluidbox', function() {
		var $this = $( this );
		$this.addClass( 'custom-fluidbox--opens' );

		setTimeout( function() {
			$this.addClass( 'custom-fluidbox--opened' );
			$this.removeClass( 'custom-fluidbox--opens' );
		}, 300 );
	} );

	$fluidbox.on( 'closestart.fluidbox', function() {
		var $this = $( this );

		$this.removeClass( 'custom-fluidbox--opened' );
		$this.addClass( 'custom-fluidbox--closes' );

		setTimeout( function() {
			$this.removeClass( 'custom-fluidbox--closes' );
		}, 300 );
	} );

It might not be the best solution, but i believe the thought is the right.

Update:
I recognize a small blink on opening image. I think this is from the z-index who came a little later on the element, so the overlay first appends over the image, before it goes to the background.

Because i have no problems on other browsers and safari mobile seems to work too, i add a small JavaScript for detection Safari for mac:

	if ( navigator.userAgent.indexOf( 'Safari' ) !== -1 && navigator.userAgent.indexOf( 'Mac' ) !== -1 && navigator.userAgent.indexOf( 'Chrome' ) === -1 && navigator.userAgent.indexOf( 'iPhone' ) === -1 ) {
		$( 'html' ).addClass( 'safari-mac' );
	}

I wrapped the SCSS code into it

html.safari-mac {
 // the whole scss from above here, including opacity: 0 !important;
}

[roelvanduijnhoven]

I also still encounter some cases were images are blurry in Safari.

Maybe reopen this issue; and dive into @sandrowuermli's post? As he seems to be on to something!

[terrymun]

@sandrowuermli @roelvanduijnhoven Sorry for being late at getting back, I've been quite swamped lately. I'll have a look at it ASAP.

With regards to the blurry images on Safari, is it only restricted to Safari on non-retina versions of MBP/iMac?

[Gaya]

@terrymun I can confirm it still happens on retina and non-retina displays. Sad my previous solution doesn't work in this case. cc: @sandrowuermli @roelvanduijnhoven

[wjakob]

I ran into this issue just now and found the old ticket here. I think that it should be reopened.