[Bug]: Screen flickers during swipe gestures on IOS (web and webview)

[rohitpotato]

What version of React Router are you using?

6.14.2

Steps to Reproduce

I have a router defined such as this:

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
    loader: () => {
      return defer({
        homePageData: homePageLoader(queryClient)(),
      });
    },
    errorElement: <FullScreenError />,
  },
  {
    path: '/support/:nodeId',
    element: <Support />,
    errorElement: <FullScreenError />,
    loader: ({ params }) => {
      return defer({
        transactionPlusCTData: transactionViewPlusCTLoader(queryClient)({
          nodeId: params.nodeId,
        }),
      });
    },
  },
  {
    path: '/support/article/:nodeId/:collectionName/:articleId',
    async lazy() {
      const ArticleRoute = await import('../pages/article');
      return {
        Component: ArticleRoute.default,
      };
    },
    loader: ({ params }) => {
      return defer({
        articleData: articleLoader(queryClient)({
          articleId: params.articleId!,
          collectionName: params.collectionName!,
        }),
      });
    },
    errorElement: <FullScreenError />,
  },
 ])

When I navigate in the application using swipe gestures, the screen flickers for a second.

This does not happen when navigate(-1) is called, but only occurs when gestures are used to navigate between screens

Expected Behavior

It should not flicker!

Actual Behavior

https://github.com/remix-run/react-router/assets/30090495/c20f4f96-9c94-46da-b14d-2b2d02f3bbeb

[puopg]

If this is the default safari behavior, this seems more like a mobile issue vs react router.

Not sure, but I wonder if this could be whats happening.

When you move from page to page, the native swipe back gesture safari has is what you have shown above. The page before I like to think of it like an image, safari is just revealing it.

So the route changes when you release the gesture. Once you let go, safari triggers the browser navigation, but since this is all the same webapp, this ultimately results in a react router navigate(-1). During the time between triggering the navigate, the page hasnt changed yet, so the browser draws the current page. Then very quickly, the back navigation is triggered. I think thats why you get a blip of the previous page.

When you call it directly, YOU are navigating immediately. Thats why it works fine there.