Bug: `Transition was aborted because of invalid state` when browser tab not active

[widavies]

React version: 19.1.1

Steps To Reproduce

1. Call document.startViewTransition when the browser tab is not active/visible
2. Go back/select the browser tab - a ViewTransition error was thrown

I can provide a repro if necessary, but I think this is fairly straightforward.

• According to the ViewTransition spec, this error is thrown when the document is not visible, as observed above (source)

react-dom does not ignore all InvalidStateErrors, and surfaces the error here:

• react/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

  Line 2047 in c499adf

  error.message === 'Transition was aborted because of invalid state'

Curiously, the error.message is Transition was aborted because of invalid state and not View transition was skipped because document visibility state is hidden.. This error was obviously caused by the document not being visible, so it seems Chrome is not returning the proper message here, or something else is going on.

It seems like Chrome may not be returning the proper error.message where it should be.

The way I see this, we could either file a ticket in Chromium or figure out an alternative way in react-dom to detect if InvalidStateError occurred when the document wasn't visible and ignore it in

[eps1lon]

Are you using the ViewTransition Component anywhere?

[widavies]

@eps1lon I put together a bit more information on this.

Here's the issue in action:

ViewTransition.Invalid.State.mp4

• The issue (seemingly) occurs when a ViewTransition is initiated while the tab is not visible
• The issue is intermittent - it happens roughly 1 in 6 times I run through my repro process
• While a bit contrived, the easiest way I've found to reproduce this is to make a change to my backend code which triggers a web-socket reconnection in Next.JS. I'm using Convex for my backend. When I update a Convex function, it rebuilds the convex (local) dev server, which triggers the reconnection in Next.JS. For some reason, this seems to trigger the startViewTransition . This is a completely arbitrary way to trigger the error.

I am using ViewTransition - my navbar has a button that transitions between my app logo and a home button depending on the active page. I removed all of the navbar except this component to make the example simple. This code is defined in my layout.tsx:

function HomeIconLogo(props: Partial<ImageProps> & { className?: string }) {
  return (
    <ViewTransition enter={'grow'} exit={'shrink'}>
      <HomeIconclassName="text-white" />
    </ViewTransition>
  );
}

function MyAppIconLogo(props: Partial<ImageProps> & { className?: string }) {
  return (
    <ViewTransition enter={'grow'} exit={'shrink'}>
      <MyAppLogo className="text-white" />
    </ViewTransition>
  );
}

Here's my css:

@keyframes shrink {
    0% {
        scale: 100%;
        opacity: 100%;
    }
    100% {
        scale: 0;
        opacity: 0;
    }
}

@view-transition {
    navigation: auto;
}

::view-transition-old(.shrink) {
    animation: shrink linear 300ms forwards;
    animation-delay: 0ms;
}

::view-transition-new(.shrink) {
    animation: shrink linear 300ms forwards;
    animation-delay: 0ms;
}

::view-transition-old(.grow) {
    animation: shrink linear 300ms reverse;
    animation-delay: 0ms;
}

::view-transition-new(.grow) {
    animation: shrink linear 300ms reverse;
    animation-delay: 0ms;
}

As mentioned above, this error is surfaced by react-dom here.

Clearly, it seems to be thrown because the tab isn't visible/active. As mentioned in the ViewTransition spec, this is an expected error thrown by Chrome when the document isn't visible. InvalidStateError is thrown, but for some reason Chrome is not setting the error message to View transition was skipped because document visibility state is hidden. as expected. react-dom ignores that error specifically, but as that error message isn't set as expected here (the actual message is Transition was aborted because of invalid state) the error is surfaced to the user.

Is this a Chrome bug (in which case we might file this ticket with Chrome instead)?

Alternatively, we could make react-dom check the document.visibilityState itself and not surface the error if the document wasn't visible. This seems pretty doable to me and I could put together a PR for this if that's a route you want to take.

Let me know if there's more information I can provide here.

Versions:

• Chrome 138.0.7204.184 (Official Build) (64-bit)
• "react": "^19.1.1" and "react-dom": "^19.1.1"
• "next": "^15.4.5",

And here's my next.config.mjs:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  experimental: {
    viewTransition: true,
  },
  reactStrictMode: true,
  /* config options here */
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'picsum.photos',
        port: '',
      },
    ],
  },
};

export default nextConfig;

[widavies]

Looks like there are some tickets on Chrome for this:

• https://issues.chromium.org/issues/40428048
• https://issues.chromium.org/issues/40431035

[sebmarkbage]

Did any one file a bug for this? I couldn't find one. The two linked ones aren't related to the error message.

[widavies]

Thanks!