vaul のドロワー /w iOS Safari でスクロール位置がバグるケースのメモ
問題はドロワーを開いたときに、スクロール位置が一番上に戻ってしまう問題。謎にモーダル内部をタップしたときにスクロール位置が壊れてタップできない問題なども付随して起こる。
似たようなissueは見つけたが、これとは別の問題のようだった。
再現条件は、
iOS Safari
ドロワー Drawer.Root / Drawer.NestedRoot をネストしている
React.StrictMode が有効な環境
バグっている状況でのDOMツリーを観察してみると、どうやらbodyへのfixedが効かなくなっている。試しにネストを取ってみると正常に動作した。
詳細に見たわけではないので不明な点もあるが、 useFixedPosition のマウント時処理と、ドロワー開いたときの処理との race condition の問題で、StrictModeを有効にしている状況ではeffectが2回実行される関係で fixed の指定がクリーンされてしまっている可能性が高そうだった。
解決策は、
StrictMode を無効化してテストする
わりとトリッキーな問題だったので、一応メモしておくことにした。