From c63126ba5feb48c4045dec70097a693e257205c9 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Tue, 3 Oct 2023 15:26:36 +0100
Subject: [PATCH] Contain all the things (#1999)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR adds some css containment where possible.

### Change Type

- [x] `patch` — minor
---
 packages/editor/editor.css     | 6 ++++++
 packages/tldraw/src/lib/ui.css | 1 +
 2 files changed, 7 insertions(+)

diff --git a/packages/editor/editor.css b/packages/editor/editor.css
index 65635af17..885a2031a 100644
--- a/packages/editor/editor.css
+++ b/packages/editor/editor.css
@@ -289,6 +289,7 @@ input,
 	touch-action: none;
 	pointer-events: none;
 	z-index: 2;
+	contain: strict;
 }
 
 .tl-grid-dot {
@@ -310,6 +311,7 @@ input,
 
 .tl-brush {
 	stroke-width: calc(var(--tl-scale) * 1px);
+	contain: size layout;
 }
 
 .tl-brush__default {
@@ -323,6 +325,7 @@ input,
 	stroke-linejoin: round;
 	stroke-linecap: round;
 	pointer-events: none;
+	contain: size layout;
 }
 
 /* ---------------------- Shape --------------------- */
@@ -332,6 +335,7 @@ input,
 	pointer-events: none;
 	overflow: visible;
 	transform-origin: top left;
+	contain: size layout;
 }
 
 .tl-shape__culled {
@@ -436,6 +440,7 @@ input,
 	transform-origin: top left;
 	fill: none;
 	stroke-width: calc(1.5px * var(--tl-scale));
+	contain: size;
 }
 
 /* ------------------ SelectionBox ------------------ */
@@ -821,6 +826,7 @@ input,
 	resize: none;
 	border: none;
 	user-select: none;
+	contain: style paint;
 	-webkit-user-select: none;
 }
 
diff --git a/packages/tldraw/src/lib/ui.css b/packages/tldraw/src/lib/ui.css
index f8410a04c..ca95f0adf 100644
--- a/packages/tldraw/src/lib/ui.css
+++ b/packages/tldraw/src/lib/ui.css
@@ -22,6 +22,7 @@
 	padding: var(--space-2);
 	pointer-events: none;
 	user-select: none;
+	contain: strict;
 	z-index: var(--layer-panels);
 	-webkit-transform: translate3d(0, 0, 0);
 	--sab: env(safe-area-inset-bottom);