[Bug]: Scroll Restoration not working on page refresh in mobile safari

[fetters5]

What version of React Router are you using?

6.4.2

Steps to Reproduce

Scroll position is not maintained in mobile safari browsers upon reload of a page. This is due to using the beforeunload event which is not supported by ios safari

function useBeforeUnload(callback: () => any): void {
  React.useEffect(() => {
    window.addEventListener("beforeunload", callback);
    return () => {
      window.removeEventListener("beforeunload", callback);
    };
  }, [callback]);
}

By changing the above code to use the visibilitychange event and checking document.visibilityState === 'hidden' it seems to work as intended in safari

Reference material

https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/ https://levelup.gitconnected.com/how-to-send-an-asynchronous-request-at-the-end-of-a-page-session-90bf7229448c https://tech.trivago.com/post/2020-11-17-exploringthepagevisibilityapifordetectin/

Expected Behavior

Expect that when reloading a page the scroll position will be maintained in ios safari

Actual Behavior

The scroll position goes to 0 since it was not captured.

[jakkku]

Here is the codesandbox
please check it on IOS mobile safari

[github-actions[bot]]

🤖 Hello there,

We just published version 6.7.1-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions[bot]]

🤖 Hello there,

We just published version 6.8.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!