[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 {
+.tl-fixed-layer {
-	position: relative;
+	position: absolute;
-	z-index: 1;
+	top: 0px;
-}
+	left: 0px;
-
+	width: 100%;
-.tl-overlays {
+	height: 100%;
-	position: relative;
+	contain: strict;
-	z-index: 2;
 }
 
 .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,7 +101,6 @@ export const Canvas = track(function Canvas({ className }: { className?: string
 			{Background && <Background />}
 			<GridWrapper />
 			<UiLogger />
-			<div ref={rHtmlLayer} className="tl-html-layer" draggable={false}>
 			<svg className="tl-svg-context">
 				<defs>
 					{shapeSvgDefs}
@@ -103,11 +111,12 @@ export const Canvas = track(function Canvas({ className }: { className?: string
 					{SvgDefs && <SvgDefs />}
 				</defs>
 			</svg>
+			<div ref={rHtmlLayer} className="tl-html-layer" draggable={false}>
 				<SelectionBackgroundWrapper />
-				<div className="tl-shapes">
 				<ShapesToDisplay />
 			</div>
-				<div className="tl-overlays">
+			<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 nextIndex = MAX_SHAPES_PER_PAGE * 2
-		let nextBackgroundIndex = 0
+		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