From a2e932b73f70cdf3cf8d7a01feeef8e01c00de6f Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Fri, 1 Dec 2023 12:37:46 -0500
Subject: [PATCH] Fix a couple of visual glitches on Firefox

---
 src/room/InCallView.module.css      | 4 +++-
 src/video-grid/VideoTile.module.css | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index e2273c4d..f413bfc9 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -28,7 +28,9 @@ limitations under the License.
   flex-direction: column;
   overflow: auto;
   overflow-inline: hidden;
-  contain: strict;
+  /* There used to be a contain: strict here, but due to some bugs in Firefox,
+  this was causing the Z-ordering of modals to glitch out. It can be added back
+  if those issues appear to be resolved. */
 }
 
 .centerMessage {
diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index f0e3d703..69da1f56 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -38,6 +38,10 @@ limitations under the License.
   height: 100%;
   object-fit: cover;
   background-color: var(--cpd-color-bg-subtle-primary);
+  /* This transform is a no-op, but it forces Firefox to use a different
+  rendering path, one that actually clips the corners of <video> elements into
+  the intended rounded shape. We can remove this if Firefox stops being broken. */
+  transform: translate(0);
 }
 
 .videoTile.isLocal:not(.screenshare) video {