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

Affected version
2.2.2

Steffen

Well-known member
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.

Diff:
--- 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.

Big.Buck.Bunny.-.Frank.Rinky.Gimera.png
 

sbj

Well-known member
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.
 

XF Bug Bot

XenForo bug fixer bot
Staff member
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.
 
Top