diff options
| -rw-r--r-- | .changeset/sixty-peas-join.md | 5 | ||||
| -rw-r--r-- | packages/astro/components/ViewTransitions.astro | 7 | ||||
| -rw-r--r-- | packages/astro/e2e/view-transitions.test.js | 26 |
3 files changed, 37 insertions, 1 deletions
diff --git a/.changeset/sixty-peas-join.md b/.changeset/sixty-peas-join.md new file mode 100644 index 000000000..62d6d184d --- /dev/null +++ b/.changeset/sixty-peas-join.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Trigger full page refresh on back nav from page without VT enabled diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index f94383f4d..8b22671b9 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -128,7 +128,12 @@ const { fallback = 'animate' } = Astro.props as Props; } }); window.addEventListener('popstate', () => { - if (!transitionEnabledOnThisPage()) return; + if (!transitionEnabledOnThisPage()) { + // The current page doesn't haven't View Transitions, + // respect that with a full page reload + location.reload(); + return; + } const nextIndex = history.state?.index ?? currentHistoryIndex + 1; const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back'; navigate(direction, location.href); diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index f42e21d12..15cc52a0f 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -104,4 +104,30 @@ test.describe('View Transitions', () => { 'There should be 2 page loads. The original, then going from 3 to 2' ).toEqual(2); }); + + test('Moving from a page without ViewTransitions w/ back button', async ({ + page, + astro, + }) => { + const loads = []; + page.addListener('load', (p) => { + loads.push(p.title()); + }); + + // Go to page 1 + await page.goto(astro.resolveUrl('/one')); + let p = page.locator('#one'); + await expect(p, 'should have content').toHaveText('Page 1'); + + // Go to page 3 which does *not* have ViewTransitions enabled + await page.click('#click-three'); + p = page.locator('#three'); + await expect(p, 'should have content').toHaveText('Page 3'); + + + // Back to page 1 + await page.goBack(); + p = page.locator('#one'); + await expect(p, 'should have content').toHaveText('Page 1'); + }); }); |