Skip to content

ClientRouter: flicker on Safari swipe back/forward gesture #16024

@koji-1009

Description

@koji-1009

Astro Info

Astro                    v6.0.8
Vite                     v7.3.1
Node                     v24.14.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

Safari

Describe the Bug

When using <ClientRouter />, Safari's swipe back/forward gesture causes a visible flicker.

The browser already performs its own visual transition during the swipe, but ClientRouter starts another view transition via document.startViewTransition(), which briefly re-displays the pre-navigation
page.

This affects both macOS and iOS Safari.

iOS.26.mov
macOS.26.mov

What's the expected result?

Safari's swipe gesture should navigate without flicker. When the browser has already performed a visual transition (PopStateEvent.hasUAVisualTransition === true), ClientRouter should skip document.startViewTransition() and update the DOM directly.

Link to Minimal Reproducible Example

https://github.com/koji-1009/astro-swipe-back-repro

Participation

  • I am willing to submit a pull request for this issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions