Lazy loading messing up Woocommerce product images.

Hi there,

Can you please provide the URL of your site in addition to a link to a product that is being affected by lazy loading as you described above? I would like to look further into this for you. Thanks!

Hello! Thanks for getting back to me.
Sure, here’s a product where the problem occurs:
page

Please note that it will only do this one time per page load. What you have to do to reproduce the problem is this:
1. load the page.
2. click on the third or fourth image.
3. watch the flex-viewport extend further than the image height.
4. if you then click on another image and go back to the one that was displaying the issue, it will no longer cause the problem but correct itself.

I’m not seeing the problem as described in Firefox 73.0.1.

Which browser, and version of, are you using?

Hello! Thanks for looking into this for me.

That’s strange, I can see the problem on same version of Firefox 73.0.1, as well as Opera v.66.0.3515.115 and Google Chrome v.80.0.3987.122.
I also can replicate the issue on my Android phone with the Chrome browser.
Did you try the above steps I gave? It’s only happening for the third and fourth image. Sorry I mean fourth and fifth image.

Thanks!

• This reply was modified 4 years, 9 months ago by sunrosea.

I’ve demonstrated the issue in this .gif as well: https://i.imgur.com/lJMTlLe.mp4

I see what you describe on my end as well. That is interesting.
Have you tried a fresh upload of all 5 images?

For right now, since you were able to pinpoint to lazy loading, if you don’t want lazy images to run on a certain page, you could hook in and disable lazy images for that page.

This page has more info on customizing Lazy Load settings https://jetpack.com/support/lazy-images/#customizing-lazy-images

Thanks,

Hello again!

So per your suggestion, I replaced all images with completely new ones with new names too (but with the same graphics of course), but now I have only four images instead. Still the fourth image is showing the same problem somehow as previous.
Very odd.

So in the end I decided to disable it on single product pages, but it would probably be a good idea to escalate the problem further.

It appears that lazy loading is setting any image after the third one to be a lazy-loading image. Those images then in someway has their height set to the same calculated amount of their width.

In my case for example, all images are the size of 1260 x 840 and is fitted to a size of 772px x 514.667px as per woocommerce settings. The lazy loading sets the “not-yet-loaded” images to be the height of 772px (same as the fitted width).

When a user clicks to load one of these lazy-images, the lazy loading now sees this image as loaded and serves the right size of the image (514.662px height), however, the woocommerce slider doesn’t manage to catch up to the fact that the image is now a different size than it was before the lazy-loading considered the image as loaded, so the flex-viewport sets it’s height to the the previous height of the image, in this case 772px instead of 514.662px (the fitted height).

• This reply was modified 4 years, 8 months ago by sunrosea.

I agree that this should be escalated. We’ll definitely look further into this. I have problems loading the page in question from your site. Did you have other pages on your site with the same setup and with similar results?

You mean the product page isn’t loading? Odd, don’t know if there was some server problems during the night here perhaps.
I removed the piece of code that blocked lazy loading on the product pages and tested adding an additional image to another product of mine (none of the other products had more than three images). I made it just a blank one (white) to not confuse any potential customer, but you can slightly see it after the third image, just click on that and it will show the same problem. Again, it’s always after the third image that it happens.
You can view the product here: Product

Hope it helps!

• This reply was modified 4 years, 8 months ago by sunrosea.

Thank you for providing that link. Is the issue now happening intermittently for you? On both pages, when I click on the fourth image, I am not having the dropdown issue like before.

If lazy loading is currently disabled, let me know. Just trying to replicate so that I can report.

Thanks,

Hello! Thanks for sticking with this problem, even though our time-zone differences makes it take a little longer. ??

Ah, I can see on your .gif that you loaded the page with the last image already selected. That means you already had clicked that image before on the same page-load. Once you have clicked on the image that has this problem, it wont show the problem again, simply because it seems to correct itself after that as I mentioned in one of my earlier posts. Kind of seems like a javascript/jQuery problem where it corrects itself “onChange”. If you refresh the page and try again, it will display the same problem again.

So in summary: The image affected by the lazy loading, only displays the problem when you for the first time click on it on the same page-load. Next time you click on it, but have not refreshed the page, it wont do it again because it corrected itself (jquery onChange?). Once refreshing the page and trying again, the image will display the same problem again.

Thanks!

• This reply was modified 4 years, 8 months ago by sunrosea.
• This reply was modified 4 years, 8 months ago by sunrosea.
• This reply was modified 4 years, 8 months ago by sunrosea.

Hi there,

I’m able to see what you’re describing, and also showing in the GIF you shared. But I think this is a WooCommerce issue: I found an existing report for that plugin at https://github.com/woocommerce/woocommerce/issues/24439 which appears to be similar. You’ll note the person who filed that report has this issue without using Jetpack at all.

Conversely, I’m not able to replicate the issue on my own site, with or without Jetpack active, so there might be other factors at play here as well.

I know you’ve confirmed that disabling lazy-load prevents this from happening, but can you also please check if this still happens when you disable all plugins except Jetpack and WooCommerce? And then if it still happens if you disconnect and disable Jetpack as well, i.e. have only WooCommerce active? If possible, can you also check if switching to the Storefront theme or to TwentyTwenty makes any difference?

Hello @kokkieh!

Ok, so I did the tests that you suggested. Here’s the observed results:

1. Deactivate all plugins except Woocommerce and Jetpack:
Result: Same problem exists.
2. Deactivate all plugins except for Woocommerce:
Result: Problem goes away (lazy-loading is off).
3. Keep all plugins on and use TwentyTwenty theme.
Result: Problem still exists.
4. Keep only Woocommerce and Jetpack with TwentyTwenty theme:
Result: Problem still exists.

So I think you’re probably right with that it’s a Woocommerce problem. Somehow the problem it only triggers with Jetpacks lazy loading though. I’ll post the problem on Woocommerce’s github and see what they say.

Thanks to all for taking your time to investigate this issue. ??