モバイル BottomSheet 遷移中の Leaflet invalidateSize を抑止して画面チカつき解消 - #229
Open
badjoke-lab wants to merge 1 commit into
Open
モバイル BottomSheet 遷移中の Leaflet invalidateSize を抑止して画面チカつき解消#229badjoke-lab wants to merge 1 commit into
badjoke-lab wants to merge 1 commit into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
visualViewport/resize、および Leaflet のinvalidateSize()が同時に複数回走ることによる再レイアウト連鎖が原因と推測されるため、遷移中はinvalidateSizeを走らせないことで UX を安定化する。Description
components/map/MapClient.tsxを変更し、invalidateMapSize(reason)を受け取るようにして、シート遷移中は実行を抑止して理由をデファーする機構（isSheetTransitioningRef,hasDeferredInvalidateRef,deferredInvalidateReasonRef）を追加した。beginSheetTransition(reason)を導入し、遷移完了判定をタイマー（280ms）で行ってデファーしていたinvalidateSizeを一度だけ実行するようにした。requestAnimationFrameと短いsetTimeout(0)を組み合わせて実際のinvalidateSize呼び出しをまとめ、onStageChangeと mobile シートの open/close をトリガーとして遷移 gating を開始するようにした（副作用のクリーンアップも追加）。Testing
npm run buildを実行してビルドは成功したことを確認した。npm run devで開発サーバを起動し、Playwright スクリプトでモバイルビュー（360x640）で/mapを開いてマーカークリック→BottomSheet 表示の操作を自動実行し、スクリーンショットを取得して動作を目視確認できた。Codex Task