AstroでView Transitionsを使うと画像が表示されない
2025年02月11日
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>
根本的な原因が分からないのだけど、応急処置のメモ。それにしてもなぜ‥。