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