[fix] awful rendering issue (#1842)

This PR fixes an extremely performance-crushing bug that was happening
in Safari and Chrome when iframes were present.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create one hundred shapes
2. Create a gist or maps embed
3. Select all

If the app crashes or the rendering layers list grows to lots and lots
of layers, that's the bug.

### Release Notes

- [fix] iframe rendering issue

packages/editor/editor.css

@@ -221,14 +221,13 @@ input,
 	contain: strict;
 }
 
-.tl-shapes {
-	position: relative;
-	z-index: 1;
-}
-
-.tl-overlays {
-	position: relative;
-	z-index: 2;
+.tl-fixed-layer {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	contain: strict;
 }
 
 .tl-overlays__item {

packages/editor/src/lib/components/Canvas.tsx

@@ -27,6 +27,7 @@ export const Canvas = track(function Canvas({ className }: { className?: string
 
 	const rCanvas = React.useRef<HTMLDivElement>(null)
 	const rHtmlLayer = React.useRef<HTMLDivElement>(null)
+	const rHtmlLayer2 = React.useRef<HTMLDivElement>(null)
 
 	useScreenBounds()
 	useDocumentEvents()
@@ -40,6 +41,8 @@ export const Canvas = track(function Canvas({ className }: { className?: string
 		() => {
 			const htmlElm = rHtmlLayer.current
 			if (!htmlElm) return
+			const htmlElm2 = rHtmlLayer2.current
+			if (!htmlElm2) return
 
 			const { x, y, z } = editor.camera
 
@@ -55,6 +58,12 @@ export const Canvas = track(function Canvas({ className }: { className?: string
 					y + offset
 				)}px)`
 			)
+			htmlElm2.style.setProperty(
+				'transform',
+				`scale(${toDomPrecision(z)}) translate(${toDomPrecision(x + offset)}px,${toDomPrecision(
+					y + offset
+				)}px)`
+			)
 		},
 		[editor]
 	)
@@ -92,22 +101,22 @@ export const Canvas = track(function Canvas({ className }: { className?: string
 			{Background && <Background />}
 			<GridWrapper />
 			<UiLogger />
+			<svg className="tl-svg-context">
+				<defs>
+					{shapeSvgDefs}
+					{Cursor && <Cursor />}
+					<CollaboratorHint />
+					<ArrowheadDot />
+					<ArrowheadCross />
+					{SvgDefs && <SvgDefs />}
+				</defs>
+			</svg>
 			<div ref={rHtmlLayer} className="tl-html-layer" draggable={false}>
-				<svg className="tl-svg-context">
-					<defs>
-						{shapeSvgDefs}
-						{Cursor && <Cursor />}
-						<CollaboratorHint />
-						<ArrowheadDot />
-						<ArrowheadCross />
-						{SvgDefs && <SvgDefs />}
-					</defs>
-				</svg>
 				<SelectionBackgroundWrapper />
-				<div className="tl-shapes">
-					<ShapesToDisplay />
-				</div>
-				<div className="tl-overlays">
+				<ShapesToDisplay />
+			</div>
+			<div className="tl-fixed-layer">
+				<div ref={rHtmlLayer2} className="tl-html-layer">
 					{/* <GeometryDebuggingView /> */}
 					<HandlesWrapper />
 					<BrushWrapper />

packages/editor/src/lib/editor/Editor.ts

@@ -3039,8 +3039,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 			maskedPageBounds: Box2d | undefined
 		}[] = []
 
-		let nextIndex = MAX_SHAPES_PER_PAGE
-		let nextBackgroundIndex = 0
+		let nextIndex = MAX_SHAPES_PER_PAGE * 2
+		let nextBackgroundIndex = MAX_SHAPES_PER_PAGE
 
 		// We only really need these if we're using editor state, but that's ok
 		const editingShapeId = this.editingShapeId