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.