Fixed Sidebar is causing layout shift

[Kirby]

Affected version

2.1.10

The sidebar (and probably sidenav? didn't test this) is being displayed using display: table-cell.

This seems to cause the browser to resize the content div when rendering the page as it does not know its width until reaching the sidebar.

 

[Kirby]

Might only be an issue in Chromium-based browsers as I can't reproduce this in Firefox.

Injecting a set of <div> with display: table-column that set the width of the colums before div.p-body-content seems to fix the CLS issue.

 

[Kirby]

Adressing this issue seems to have improved our Desktop origin CLS from 0,12 to 0,07 so far.

 

[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.0 RC2).

Change log:

Define page sidenav and sidebar widths earlier to reduce likelihood of layout shifts.

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

 

[Mike]

Worth mentioning that I haven't seen any CLS issues relating to this and even when doing some simulated tests locally, I didn't run into any sort of reflowing. However, I suspect this will also resolve an issue that has come up a number of times in the past related to how some ads detect their width and end up going under the sidebar (though it might affect how some styles/add-ons do collapsing sidebars as they'll need to manipulate the width on the related col element as well).