fix(edgeless): offsetWidth of edgeless root is zero in Safari

[L-Sun]

Close BS-767

In Safari, If a custom element does not explicitly set its size, then its offsetWidth and offsetHeight are 0, which make the following computation error

blocksuite/packages/blocks/src/root-block/edgeless/utils/viewport.ts

Lines 338 to 345 in 4d01083

	/**
	* Note this is different from the zoom property.
	* The editor itself may be scaled by outer container which is common in nested editor scenarios.
	* This property is used to calculate the scale of the editor.
	*/
	get scale() {
	return this.boundingClientRect.width / this._el.offsetWidth;
	}

blocksuite/packages/blocks/src/root-block/edgeless/utils/viewport.ts

Lines 77 to 87 in 4d01083

	onResize() {
	const { centerX, centerY, zoom, width: oldWidth, height: oldHeight } = this;
	const { left, top } = this._el.getBoundingClientRect();
	const { offsetWidth: width, offsetHeight: height } = this._el;
	this.setRect(left, top, width, height);
	this.setCenter(
	centerX - (oldWidth - width) / zoom / 2,
	centerY - (oldHeight - height) / zoom / 2
	);
	}

PS: This behavior is different from chrome. I think it may be a bug of Safari

Before

Before.mov

After

After.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blocksuite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 18, 2024 3:55am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
blocksuite-docs	⬜️ Ignored (Inspect)	Visit Preview		Jul 18, 2024 3:55am

[graphite-app]

Your org has enabled the Graphite merge queue for merging into master

Add the label “merge” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

[L-Sun]

• fix(edgeless): offsetWidth of edgeless root is zero in Safari #7599 👈
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @L-Sun and the rest of your teammates on Graphite