Fixed CLS Shift issue (Media Gallery view Item)

[benFF]

I guess because it only just got around to it, but I just got a warning from Google about CLS issues on thousands of pages.

They all related to gallery item pages - which I can confirm if I load one up.

Are they lazy loaded, as I can see that xF is correctly setting a height and width element to the image itself, but it doesn't seem to have any effect when the page actually displays.

Has anyone come up with a solution to this? I don't really want to exclude media items from the google index....

 

[benFF]

Well this post also solves the issue (but editing the xfmc_media_view.less template)

Fixed - Fix layout shifts caused by images, especially noticeable due to lazy loading in XenForo 2.2 (patch included)

Modern browsers automatically infer the aspect ratio of images from their width and height attributes (https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes). This prevents layout shifts when images load which is especially noticeable in XenForo 2.2 due to the...

xenforo.com

Removing the width: auto from the img.media-container declaration, is this a proper fix?

 

[Paul B]

I've moved the thread to bug reports so the dev's can decide if they want to implement something similar for media pages.

 

[benFF]

I've moved the thread to bug reports so the dev's can decide if they want to implement something similar for media pages.

Whilst that change did get Google to fix all my CLS penalties, it had the adverse affect of making all the gallery images in portrait format stretch out - so not the correct solution!

 

[420]

We have the same exact problem with over 3 million photos in our gallery and Google is deindexing all of them, please hurry with a solution!

 

[XF Bug Bot]

Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XFMG release (2.2.5).

Change log:

Avoid layout shift when viewing media items.

There may be a delay before changes are rolled out to the XenForo Community.