Merge pull request #6644 from matrix-org/palid/fix/layers-overwhelming

Increase general app performance by optimizing layers

Author: Palid

res/css/structures/_BackdropPanel.scss

@@ -22,6 +22,8 @@ limitations under the License.
     width: 100%;
     overflow: hidden;
     filter: blur(var(--lp-background-blur));
+    // Force a new layer for the backdropPanel so it's better hardware supported
+    transform: translateZ(0);
 }
 
 .mx_BackdropPanel--image {

res/css/structures/_LeftPanel.scss

@@ -26,6 +26,10 @@ $roomListCollapsedWidth: 68px;
 .mx_LeftPanel_wrapper {
     display: flex;
     max-width: 50%;
+    position: relative;
+
+    // Contain the amount of layers rendered by constraining what actually needs re-layering via css
+    contain: layout paint;
 
     .mx_LeftPanel_wrapper--user {
         background-color: $roomlist-bg-color;

res/css/structures/_RoomView.scss

@@ -20,6 +20,8 @@ limitations under the License.
     flex: 1;
     position: relative;
     justify-content: center;
+    // Contain the amount of layers rendered by constraining what actually needs re-layering via css
+    contain: strict;
 }
 
 .mx_RoomView {
@@ -163,7 +165,6 @@ limitations under the License.
     flex: 1;
     display: flex;
     flex-direction: column;
-    contain: content;
 }
 
 .mx_RoomView_statusArea {

res/css/structures/_ScrollPanel.scss

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 .mx_ScrollPanel {
+    contain: strict;
 
     .mx_RoomView_MessageList {
         position: relative;