[Pablo]

Hi,

I have found that when the next image in the product gallery is dark that the current product image displays a thin strip of that next image down the right hand side.

I am using square aspect ratio product images but I checked on your demo website and you have the same issues there…

Example 1) The satin boots – on the first image you see the dark line down the right hand side of the image because the next image is dark. Click on the second image and there is no strip down the right hand side because the third image is not dark.
https://rigid.althemist.com/product/test-product-with-really-long-name-23/
Example 2) Click on the second image in the gallery for this dress. You will see a strip of pink down the right hand lower side of the image because the third image has the woman’s arm at the edge of the photo.
https://rigid.althemist.com/product/test-product-with-really-long-name-5/

It is not an issue with the Woocommerce Storefront Theme so I presume it is something in the Rigid theme. Is it something easily corrected or is there a workaround with CSS for now?

Kind regards,

[Pablo]

Have you been able to check this issue yet?

[Althemist]

Hi zuyo,

Sorry for the late reply.

Anyways we were not able to replicate what you describe on that links. No dark or pink stripes. Could you, please tell us what’s your browser and screen resolution? Everything seems fine on our end.

[Pablo]

Hi,

I am running Windows 10 1920×1080 display scaled to 125% (I have also checked at 100% scaling and it makes no difference). Using Chrome browser Version 84.0.4147.89 (Official Build) (64-bit) is most noticeable and I think it is also something to do with the zoom.

Chrome – you can see the issue at 90%, 100%, 110%, less noticeable at 125% but then noticeable at 150% again.
Firefox – it is not an issue until you zoom in to 150%.
Edge – only noticeable at 90% and 150% zoom.

So, it is really only going to be noticeable on Chrome.

Not an issue on mobile device.

Kind regards,

[Althemist]

Still can’t reproduce the problem tried on different computers, laptops and monitors. Here are screenshots of the product you mentioned in 100, 110 and 15% zoom:

[Pablo]

Hi,

That is strange. I have just noticed after checking again today that it is now only a problem at 90% and 150% when in full screen (no longer at 100, 110 and 125%). Chrome is full screen in image 1 and 2 (90% and 150%). Image 3 is when the window is not full screen it appears OK on all zoom levels. But image 4 dragging the left hand side of the browser level in you can see the line again. Drag in and out to see the issue. When resizing the browser window the issue can be seen at 90, 110, 125 and 150% zoom levels but not 100%. It is probably a Chrome thing then… Like the pixelated thumbnails that I have not been able to resolve.

Image 1: Chrome Full Screen 90%

Image 2: Chrome Full Screen 150%

Image 3: Not Full Screen Chrome 90%

Image 4: Not Full Screen Browser Window Resized 90%

[Althemist]

Now I understand. This is not theme related. When resizing the window manually, the entire flex slider script re-initiates. This is how it works and it can’t be changed as it’s the default WooCommerce gallery. It wasn’t meant to be resized multiple times and used with zoom-in/zoom-out as this is not the standard user’s behavior.

While we admit flex slider is a really old script and not the best solution for a modern website, there is really nothing we can do as it’s part of the default WooCommerce functionality.

[Author]

Posts