"Double Animation" on Safari when View Transitions on

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

Start with the React view-transitions example at src/routes/__root.tsx and trace createRouter's defaultViewTransition handling alongside the navigate event's hasUAVisualTransition value. Reproduce the swipe navigation behavior in Safari, then verify that browser-provided transitions do not trigger a second router view transition.