fix(edgeless): large frame crash on ios safari (#8877)

packages/blocks/src/frame-block/frame-block.ts

@@ -2,6 +2,7 @@ import type { FrameBlockModel } from '@blocksuite/affine-model';
 
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { GfxBlockComponent } from '@blocksuite/block-std';
+import { Bound } from '@blocksuite/global/utils';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { html } from 'lit';
 import { state } from 'lit/decorators.js';
@@ -24,6 +25,38 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
         }
       })
     );
+    this._disposables.add(
+      this.gfx.viewport.viewportUpdated.on(() => {
+        this.requestUpdate();
+      })
+    );
+  }
+
+  /**
+   * Due to potentially very large frame sizes, CSS scaling can cause iOS Safari to crash.
+   * To mitigate this issue, we combine size calculations within the rendering rect.
+   */
+  override getCSSTransform(): string {
+    return '';
+  }
+
+  override getRenderingRect() {
+    const viewport = this.gfx.viewport;
+    const { translateX, translateY, zoom } = viewport;
+    const { xywh, rotate } = this.model;
+    const bound = Bound.deserialize(xywh);
+
+    const scaledX = bound.x * zoom + translateX;
+    const scaledY = bound.y * zoom + translateY;
+
+    return {
+      x: scaledX,
+      y: scaledY,
+      w: bound.w * zoom,
+      h: bound.h * zoom,
+      rotate,
+      zIndex: this.toZIndex(),
+    };
   }
 
   override renderGfxBlock() {