From 798da0f5fac43b4bf5429230cfee5459eb4b3873 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Thu, 19 Aug 2021 19:00:31 +0200
Subject: [PATCH 1/2] Improve layering for chat

Currently we have a lot of unnecessary layers being created in the app,
which is extremely problematic on Windows when using Chrome, as it
deoptimises fonts rendering due to layers mismatch; chrome's algorithm
can't figure out if the layers won't resize or overlap so it creates a
lot of additional layers, which has a side effect of turning off
sub-pixel antialiasing on Windows.
This is a first step to improve the layering in the entire app.
---
 res/css/structures/_LeftPanel.scss   | 2 ++
 res/css/structures/_RoomView.scss    | 3 ++-
 res/css/structures/_ScrollPanel.scss | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index da17e5f1f9..fced77bac8 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -26,6 +26,8 @@ $roomListCollapsedWidth: 68px;
 .mx_LeftPanel_wrapper {
     display: flex;
     max-width: 50%;
+    // 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;
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 81ea75c442..67529878c9 100644
--- a/res/css/structures/_RoomView.scss
+++ b/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 {
diff --git a/res/css/structures/_ScrollPanel.scss b/res/css/structures/_ScrollPanel.scss
index 7b75c69e86..82caeae29d 100644
--- a/res/css/structures/_ScrollPanel.scss
+++ b/res/css/structures/_ScrollPanel.scss
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 .mx_ScrollPanel {
+    contain: strict;
 
     .mx_RoomView_MessageList {
         position: relative;

From 972682139e6e14bf152e37666b44cb0743e29e4c Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Tue, 24 Aug 2021 19:23:12 +0200
Subject: [PATCH 2/2] Force a new layer for backdrop panel

---
 res/css/structures/_BackdropPanel.scss | 2 ++
 res/css/structures/_LeftPanel.scss     | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/res/css/structures/_BackdropPanel.scss b/res/css/structures/_BackdropPanel.scss
index 6c41ed7a09..482507cb15 100644
--- a/res/css/structures/_BackdropPanel.scss
+++ b/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 {
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index fced77bac8..32d50b9a80 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -26,6 +26,8 @@ $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;