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

[Steffen]

Affected version

2.2.2

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 lazy-loading it has introduced.

XenForo needs to remove a single CSS property (which at first glance seems superfluous anyway?) to make this work.

--- a/src/addons/XF/_data/templates.xml
+++ b/src/addons/XF/_data/templates.xml
@@ -26142,7 +26142,6 @@ a
 
 .bbImage
 {
-    width: auto;
     height: auto;
     max-width: 100%;
 }
@@ -37260,7 +37259,6 @@ pre.sf-dump
 
 .bbImage
 {
-    width: auto;
     height: auto;
     max-width: 100%;
 }

Example: Use the developer tools of your browser to throttle your network to "Fast 3G" and then hard-reload this page. Notice that the layout shifts when the image starts loading. This patch prevents the layout shift and improves the Cumulative Layout Shift (CLS) core web vitals metric.

 

[briansol]

related? https://xenforo.com/community/threa...ight-and-width-of-images.190369/#post-1493989

 

[sbj]

Since the release of 2.2, if I click on alerts, it never lands on the newest reply but like on the bottom of the page. I believe it is because of layout shifts? Using the latest Firefox here.

 

[dethfire]

layout shifts are also detected by Google and as of May 2021 will be part of their ranking algorithm

 

[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 XF release (2.2.4).

Change log:

Avoid unexpected layout shifts when embedded images/attachments have known dimensions.

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