ズームした際、Blink(Chrome)とWebkit(Safari)でscrollXやscrollYがズレる

ユーザーのスクロール位置を取ろうとしたところ、ズームしていた際のスクロール位置がChromeとSafariでズレがあった。

Webkit(Safari)ではscroll値にoffset値が加算される

offset値とはwindow.visualViewportのoffsetLeft,offsetTop。
通常はどちらも0で変化しないが、ユーザーがズームしてスクロールした際にこの数値が動くことがある。
そのため、ChromeとSafariでscrollYなどの値を合わせたい場合、Safariではこのoffset値をscroll値からマイナスする必要がある。

const { offsetLeft, offsetTop } = window.visualViewport ?? { offsetLeft: 0, offsetTop: 0 }
const scrollX = window.scrollX - offsetLeft
const scrollY = window.scrollY - offsetTop

---

ズームした際までscroll値を厳密に取りたいというケース自体、かなり稀だと思うが今後ハマった方のために