New CLS Woo Product Page

Hi Stephen,

I can't seem to replicate the CLS upon testing on mobile and desktop.

See:
https://share.getcloudapp.com/Jrup1Av4
https://share.getcloudapp.com/d5ugwlY4

How are you testing it?

Hi Fernando, thanks for looking into this.

- This is from Google PageSpeed Insights.

- The mobile screen size must be long enough to include the text below the image gallery which shifts up after images load. I can also see the shift visually when I load on my mobile phone.

- by setting max-height in px in addional CSS I can fix it for one screen size but then it messes up on other screen sizes.

- Previously David has had good work arounds with additional CSS.

- Strictly speaking I think this problem is from WooCommerce not GeneratePress.

Thanks
Stephen

Hi there,

so the lazy loading of the thumbnails in the gallery navigation seems to be the issue.

Try this CSS to give those a min-height on load:

.woocommerce div.product div.images .flex-control-thumbs {
    min-height: 90px !important;
}

thanks,

I've been trying with this one and even with silly numbers I'm not seeing any change at all, good or bad.
( I do get changes with .woocommerce div.product .woocommerce-product-gallery )

eg - .woocommerce div.product div.images .flex-control-thumbs {
   min-height: 500px;
}

or

.woocommerce div.product div.images .flex-control-thumbs {
   max-height: 5px;
}

Try making the CSS !important - i update my CSS above to include it

Thanks David

I never though to try !important

This is having an effect as if I try 900px it does make a big space.

However its not neutralised the shift.

The shift is upwards so should I be trying a max-height instead of min-height ?

Try adding a max-height see if it makes a difference. If it does then you know that the .flex-control-thumb element is expanding, which could be the way the images are being served. If it doesn't then something else is the issue

great thanks I'll try this later on.

Looks to me like the overall space for .woocommerce-product-gallery shrinks when loaded but exactly which bit is shrinking I'm not sure.

As the gallery is a different size in px in different screen sizes I may not be able to get one number that works.

Thanks
Stephen

No changing the size of .flex-control-thumb doesn't effect my shift its coming from something else.

I can stop the shift by setting min height for .woocommerce-product-gallery eg:

.woocommerce div.product .woocommerce-product-gallery {
min-height: 650px !important;
}

But ... The height of .woocommerce-product-gallery changes over the range of screen sizes from approx 250px to 650px high so setting a min height does leave a large space on some pages.

Let me know if you have any further ideas.

Thanks
Stephen

if there is a way to set min-height to normal height + 10px then that would fix it but I doubt that is an option !

actually this seems to work:

@media (max-width: 768px) {
.woocommerce div.product .woocommerce-product-gallery {
min-height: 109vw !important; }
}

Thats one way to do it :)
There is not way to do a "normal height" + 10px, when the normal height is unknown.

For anyone with the same problem, setting an absolute height for mobile screen size works better and entirely eliminates CLS on woocommerce single product page mobile screen size.

@media (max-width: 768px) {
.woocommerce div.product .woocommerce-product-gallery {
height: 110vw !important; }
}

@media (max-width: 768px) {
.woocommerce div.product .woocommerce-product-gallery {
height: 110vw !important; }
}

This works for me, too! Thank you for posting.