Product Image Issues

[lambsalmon]

Okay, so I have read through dozens of posts trying to sort this but there’s definitely a bug with the way the product image renders in Safari. It’s blurry. In Firefox it’s perfect. Also if I click the arrows to bring up the pop-out image viewer the image dimensions are different.

Link here
http://reignandhail.co.uk/?product=london

[Kyle – SUPPORT]

Hi

It’s just as sharp in Safari for me (see screenshot)

– Kyle

[lambsalmon]

Are you kidding? Safari is on the right, correct? Look at the difference in the dots in the pods and the clarity of the lines. It might not be hugely obvious at first, but I’m selling artwork and it needs to be sharp. Is it something to do with the way the slider renders in Safari?

Also, when you click the arrows to expand the image into a pop-up the dimensions are totally different?

I appreciate you looking at this for me, this is really bugging me…

[Kyle – SUPPORT]

Ahh yes I see, I will ask the developer about this and get back to you

– Kyle

[lambsalmon]

Cheers

[Swift Ideas – Ed]

Hi @lambsalmon,

Very odd, can’t seem to see any cause for this. Could you possibly provide a login in a private reply, and also a larger version of the image for me to test?

Thanks,

– Ed

[lambsalmon]

This reply has been marked as private.

[Swift Ideas – Ed]

@lambsalmon – I’m able to replicate here. Seems like it might be something to do with the slider plugin. Investigating further tomorrow morning and will get back to you with any progress.

Thanks,

– Ed

[lambsalmon]

Okay, There’s two issues here, the blurry product image is only in Safari. It’s not just on my site, but everybody’s. I just don’t think people notice it.

The second issue where you click the arrows to expand image into pop up window, the image is squashed horizontally. This happens in all browsers – again on everybody’s site, maybe people just don’t notice it.

These two bugs render the whole thing unusable to me. I imagine it’s the slider plugin at fault.

[Swift Ideas – Ed]

Fixed both for you (custom css added to theme options).

1st seems to be resizing the area to 561px, which means that 1px reduction in size makes the image blurry.

2nd is the WooCommerce prettyphoto lightbox resizing the image for seemingly no reason – likely replace this soon.

Hope that helps.

– Ed

[lambsalmon]

Legendary. If the WooCommerce pretty photo lightbox is replaced, will I then need to remove some of the custom CSS?

Thanks for your work.

[Swift Ideas – Ed]

@lambsalmon – can leave the css, it won’t have any effect if the lightbox is replaced.

Glad I could help.

– Ed

[westcoastsurf]

What is the css fix you used Ed?

[Swift Ideas – Ed]

It was this code:

#pp_full_res > img {
height: auto!important;
}

– Ed