terrymun/Fluidbox

Blurred Images?

Closed this issue · 8 comments

aaronstezycki commented

Hi Terry,

Thanks for your help so far, and good plugin!

I have a problem in Safari which seems to blur the images when clicking on the thumbnail. Ive seen some of your demos, and this doesn't seem to occur. So really I'm just asking for advice on your implementation. This doesn't seem to occur with any other browser, and the blurring seems linked to the transform scale property? I can't produce a reduced test case at the minute, just wondering if you have come across this before?

terrymun commented

Yes, I have came across this before. The weird thing is that whenever you create a new stacking context within the Fluidbox element, the transform of the ghost image appears to blow up a smaller version of the raster image, causing it to be pixelated. The only workaround is to avoid creating new stacking contexts within each Fluidbox instance.

The read me contains a rather long (but likely non-exhaustive) list of CSS properties that can cause creation of a new stacking context.

aaronstezycki commented

Yup @terrymun, it seems simply deleting/display:none on elements on the same stacking context fixes it. Its a shame, because it my nav menu!, which is a full screen menu that sits above the content. Getting rid of it increase clarity. Why oh why safari, must you be a pain in my ass.

Again, thanks for your help.

buditanrim commented

Hello, I'm having this same issue while using wordpress
I realized it might be because of the wordpress admin bar have higher z-index. But apparently it isn't affecting at all after I successfully hard-coded it.

How to debug this? I am not sure what is wrong, I also get rid of all CSS that might cause creation of a new stacking context.

My issue is, after clicking the image, it's appear fluidbox blows up the low image with using CSS3 Scale (2,xx) - ended up with blur image

terrymun commented

You can start debugging it by creating a reduced, minimal example that can reproduce your issue. The thing is that there are many ways a new stacking context can be created, and it is impossible for me to troubleshoot your code. The easiest way is to reproduce the page in question, static HTML and all—and rebuild the page carefully with selected components until something breaks.

buditanrim commented

Okay, I think the best way is just give this link
http://www.agustinegozali.com/golden-brown/

please kindly click on one of the image ( Especially the small images in row)
http://cl.ly/image/392c3J2C283B?_ga=1.117616329.154516982.1449219868

this is the css that I concerned
it has hard-coded width+height and also use transform:Scale
http://cl.ly/image/0w0W172F0i0m?_ga=1.117616329.154516982.1449219868

Please let me know if this is something general, I tried to read everything before posting this comment. But nothing seems works for me

BTW - Thanks for your quick response, it's awesome.
I appreciate this

terrymun commented

That is not an issue related to blurred images? I can only see that the CSS transform is failing (the scale is being set to 0,0, which means your image will have zero dimensions). The width and height of the element will not change—the resizing is being handled by CSS 2D transforms.

Some questions:

  1. Are you using a lazy load image plugin? Are the image source and dimensions unavailable to Fluidbox at runtime?
  2. Is the image being hidden on page load/runtime?
buditanrim commented
  1. no, I didn't use any lazy load image plugin/jQuery
    I believe the image source is available to Fluidbox at runtime, not sure about dimensions (What do you mean with dimensions?) - this is what I use in the back admin dashboard
    <a class="fluidbox" href="'link/imagepath" rel="lightbox" data-fluidbox=""> <img src="link/imagepath"/> </a>
  2. I don't think so.. not that under my knowledge.

The way I see it as blur image is:
the image has lower width & height. In this case - it is 300+px and 200+px while the original image has 1000+px and 900+px. Therefore it is not the original size, and for some reason it has CSS transform scale blows up the 300+px and 200+px to fit viewport.

is this normal behaviour? The scale thing

--- edit---

  1. after I saw your demo, it is behave the same way. But the picture is sharper
  2. I load js before body - is this somewhat affecting this issue?
buditanrim commented

I am sorry, I think we are looking at different thing yesterday.
I still got my old cache on my laptop, now I can see the site is a little bit broken since I updated the new fluidbox js - looks like it has different classes in css.
I will fix this and get back to you