SOLVED: Woocommerce Product Gallery Weird Bug

Browser: Chrome 121.0.6167.86
OS: macOS / Windows
URL: https://giftone.seafoodholdhand.com/product/3-in1無線快充適用蘋果手機手錶-複製-3/
Video: Jam
Photo: https://i.imgur.com/MjIV8cL.png

On refreshing the page, it happens when the thumbnail position is left or right and the image size is smaller than the container width.

HTTP AUTH:

user: giftone
pass: GIFTONE

Hi Glass,
Thanks so much for your report.

We currently have various other reports on problems with the Product Gallery. However, I don’t know how to reproduce your specific problem, but I hope that it will “fix itself” as soon as the other - partly similar - problems are solved.

  1. Does the same problem occur if you use the horizontal slider instead of the vertical one (i.e. the thumbnails are under the main image instead of next to it)?

  2. Does the problem also occur with a completely new, unstyled element?

  3. Does the problem occur if you set a larger image size in the elements settings?

Best regards,
timmse

nope. it works fine in the horizontal slider.

Yes.

Yes.

Hey,
As far as I can see you’re using Cloudflare’s rocket loader, which also throws an error in the console.

Please disable it, clear the cache and see if that resolves the issue. I guess the JS execution gets blocked, so the width calculation isn’t right.

  1. Log into the Cloudflare dashboard.
  2. Select your account and website.
  3. Go to Speed > Optimization.
  4. Scroll down until you find Rocket Loader.
  5. Turn it off.

Turned off the Rocket Loader and no luck :smiling_face_with_tear:

Would you be so kind as to send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase?

Hey, unfortunately, we have not been able to find the cause of the problem and cannot replicate it - however, we have added some custom JS, which fixes the problem in your case.

Maybe you can try again to reproduce the problem in a new, very simple installation (without xxx plugins and custom code).