"Double Animation" on Safari when View Transitions on

[hipstersmoothie]

Which project does this relate to?

Router

Describe the bug

On safari and browser that have default navigation transitions it clashes with view transitions.

Your Example Website or App

https://stackblitz.com/github/tanstack/router/tree/main/examples/react/view-transitions?embed=1&theme=dark&preset=node&file=src/routes/__root.tsx

Steps to Reproduce the Bug or Issue

1. Have the router set up to do page transitions on navigate
2. On a safari browser use swipe to navigate back or forward
3. Observe seeing two animation: safari's and the view transition

Expected behavior

I only see the default browser animation and not the view transition (we can't do the other way)

This is relatively easy to fix but I think it should be apart of the router itself

import { createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";

let uaVisualTransitionDetected = false;

function installUANavigationTransitionDetection() {
  if (globalThis.document === undefined) return;

  navigation.addEventListener("navigate", (event) => {
    uaVisualTransitionDetected = Boolean(event.hasUAVisualTransition);
  });
}

export const getRouter = () => {
  installUANavigationTransitionDetection();

  const router = createRouter({
    routeTree,
    defaultViewTransition: {
      types: () => {
        if (uaVisualTransitionDetected) {
          uaVisualTransitionDetected = false;
          return false;
        }
        return [];
      },
    },
  });

  return router;
};

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.159.0
• OS: macOS
• Browser: Safari

Additional context

No response