Add CSS containment rules for shorter reflow operations

[germain-gg]

This introduces CSS containment to the codebase

improve performance of web pages by allowing developers to isolate a subtree of the page from the rest of the page. If the browser knows that a part of the page is independent, rendering can be optimized and performance improved

I am using mainly three CSS properties

• contain
• content-visiblity
• contain-intrinsic-size

You can see the perf benchmark below where I frantically scroll up and down the timeline in Matrix HQ, this PR focuses on reducing the purple (layout) and green (paint). Another PR is looking at reducing the yellow (script) check #6079

contain

Here is a list of all the areas of the page that will now isolate its subtree from the rest of the page. They looked like correct candidates and from my research no content bleeds out of them, making them great candidates for CSS containment

• Dialog
• ContextualMenu
• LeftPanel
• Breadcrumbs
• RightPanel
• RoomViewTimeline
• MessageListEvent
• DecoratedRoomAvatar
• RoomTile (the fixed height allows to use contain: strict)

There are probably a lot more area that could benefit from that, but they seemed like some logical blocks of content that will unlikely ever bleed content outside of themselves

content-visiblity

content-visibility: auto;
contain-intrinsic-size: 50px;

The above lets us almost create a virtualised list of events purely using CSS. This has not landed in every browser but will progressively enhance the experience as this feature lands in more ecosystems

contain-intrinsic-size is an estimation of the height of every event in the timeline. This value is arbitrary and subject to change. As far as I understand it's a signal browsers will use to decide when to start rendering components and almost create a better estimated scrollHeight so that the scrollbar is not "jumpy"

Before 🐌

After 🐎

[turt2live]

overall seems fine, though caniuse says Safari isn't supported: does this have negative impacts on Safari, or is it just ignored?

[germain-gg]

overall seems fine, though caniuse says Safari isn't supported: does this have negative impacts on Safari, or is it just ignored?

It will have no effect and be ignored
The only case where I can see that being problematic is because creating contain will create a new stacking context and change the overflow behaviour.

In a world where all browser would support that property we could spare ourselves adding position: relative; and overflow: hidden;. But for cross browser support we will have to pay attention to that