AstroでView Transitionsを使うと画像が表示されない

AstroでView Transitionsを使ってサイトを構築。初回ロード時は問題なく画像が表示されるのに、ページ遷移をして戻ってくるとリンクが切れてしまう問題が発生。問題が生じるのはトップページ(/)のみ。

バージョン

astro:5.2.5
gsap:3.12.7

問題が発生する環境

iOS(Chrome/Safari)のみで問題を確認。Macだと問題なく動く。

解決策①

ページ表示の度にJavascriptでリンクを再設定する。View Transitionsで遷移が完了するとafter-swapイベントが発生するので、それを検出してスクリプトを実行する。

<script>
    const resetImageLink = () => {
        document.querySelector('.img').src = 'img.png';
    }

    resetImageLink();

    document.addEventListener('astro:after-swap', () => {
        resetImageLink();
    });
</script>

解決策②

View Transitionsを無効にする。元も子もないのだけど、問題が発生しているページへのリンクにdata-astro-reload属性を設定すると、View Transitionsが無効になる。

<a href="/" data-astro-reload>

根本的な原因が分からないのだけど、応急処置のメモ。それにしてもなぜ‥。