Tengo varios enlaces de anclaje en mi sitio web y todos funcionan correctamente. Sin embargo, un enlace específico muestra un comportamiento extraño, y solo en Safari (tanto iPhone como MacOS). Se desplaza más alto que la posición real del div anclado, pero no hasta la parte superior del documento, ni un poco más alto, ni hasta la parte superior exacta del elemento anterior, solo un número aleatorio alrededor de 400-500 px.

Mi versión de Safari en Mac - 14.1.2 (16611.3.10.1.6)

Estoy usando este gancho para desplazarme

 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]);

Ya he probado:

• registrando los valores de offsetTop (son casi iguales en Safari y Chrome, y la diferencia es mucho mayor)
• eliminando parte con header.offsetHeight (cambió solo ligeramente, como se esperaba, en la altura del encabezado, pero el problema persiste)
• comprobando si algunos otros elementos contienen la misma identificación que mi div de destino (no)
• revisando la ortografía de este ancla (es correcta)
• convirtiendo el enlace de 'https://mylink#anchor' a 'https://mylink/#anchor' (nada cambió)
• comprobando si hay alguna diferencia entre esta sección y todas las demás en el sitio web (no, es absolutamente estándar)

Realmente agradecería cualquier ayuda, ya que ahora estoy totalmente despistado con este problema.