I have several anchor links on my website and all of them work correctly. However, one specific link shows weird behavior - and only in Safari (both iPhone and MacOS). It scrolls higher, than actual position of the anchored div - but not to the top of the document, not slightly higher, not to exact top of the previous element - just some random number around 400-500 px.
My version of Safari on Mac - 14.1.2 (16611.3.10.1.6)
I'm using this hook for scroll
useEffect(() => {
const anchor = router.asPath.split('#')[1];
if (anchor) {
setTimeout(() => {
const node = document.getElementById(anchor);
const header = document.querySelector('header.sticky');
if (node && header) {
window.scrollTo({
top: node.offsetTop - (header as HTMLElement).offsetHeight,
});
}
}, 100);
}
}, [router.asPath]);
I have already tried:
- logging the offsetTop values (they're almost the same in Safari and Chrome, and the difference is much bigger)
- removing part with header.offsetHeight (it changed only slightly, as expected, on header height, but the problem remains)
- checking if some other elements contain the same id as my target div (nope)
- checking spelling of this anchor (it's correct)
- converting link from 'https://mylink#anchor' to 'https://mylink/#anchor' (nothing changed)
- checking if there is any difference between this section and all the others on website (no, it's absolutely standard)
I would really appreciate any help, as now I'm totally clueless with this problem.