From 0962075f8da7df05a2f3007b6a63fb93962bb5e0 Mon Sep 17 00:00:00 2001
From: Eric Eastwood <contact@ericeastwood.com>
Date: Wed, 19 Oct 2022 01:50:16 -0500
Subject: [PATCH] Improve performance of scrolling on room directory (animating
 gradient and shadow header) (#90)

---
 public/css/room-directory.css | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/public/css/room-directory.css b/public/css/room-directory.css
index ff995e4..d0742c5 100644
--- a/public/css/room-directory.css
+++ b/public/css/room-directory.css
@@ -3,6 +3,9 @@
 }
 
 .RoomDirectoryView_header {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
   padding-left: 10px;
   padding-bottom: 80px;
   padding-right: 10px;
@@ -34,16 +37,18 @@
 }
 
 .RoomDirectoryView_headerForm {
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
   align-items: center;
   padding-top: 80px;
 
-  /* Based on https://css-tricks.com/make-a-smooth-shadow-friend/ */
-  filter: drop-shadow(0 2.8px 2.2px rgba(0, 0, 0, 0.034))
-    drop-shadow(0 6.7px 5.3px rgba(0, 0, 0, 0.048)) drop-shadow(0 12.5px 10px rgba(0, 0, 0, 0.06))
-    drop-shadow(0 22.3px 17.9px rgba(0, 0, 0, 0.072))
-    drop-shadow(0 41.8px 33.4px rgba(0, 0, 0, 0.086)) drop-shadow(0 100px 80px rgba(0, 0, 0, 0.12));
+  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
+
+  /* We're not changing transform on this element but this hints the browser to create a
+   * new layer which will be much easier to composite on top of our animating background.
+   * Related: https://web.dev/animations-guide/#force
+   */
+  will-change: transform;
 }
 
 .RoomDirectoryView_matrixLogo {