diff --git a/.changeset/weak-kids-roll.md b/.changeset/weak-kids-roll.md new file mode 100644 index 000000000..7d6d61f42 --- /dev/null +++ b/.changeset/weak-kids-roll.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix scroll position when navigating back from page w/o ViewTransitions diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index 6cf0a5ccd..c0735c330 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -30,9 +30,11 @@ const { fallback = 'animate' } = Astro.props as Props; // The History API does not tell you if navigation is forward or back, so // you can figure it using an index. On pushState the index is incremented so you // can use that to determine popstate if going forward or back. - let currentHistoryIndex = history.state?.index || 0; - if (!history.state && transitionEnabledOnThisPage()) { - persistState({ index: currentHistoryIndex, scrollY: 0 }); + let currentHistoryIndex = 0; + if (history.state) { + // we reloaded a page with history state (e.g. back button or browser reload) + currentHistoryIndex = history.state.index; + scrollTo({ left: 0, top: history.state.scrollY }); } const throttle = (cb: (...args: any[]) => any, delay: number) => { @@ -352,6 +354,7 @@ const { fallback = 'animate' } = Astro.props as Props; // The current page doesn't haven't View Transitions, // respect that with a full page reload // -- but only for transition managed by us (ev.state is set) + history.scrollRestoration && (history.scrollRestoration = "manual") location.reload(); return; } diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/long-page.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/long-page.astro index 8cd1d9de2..ebe918c68 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/pages/long-page.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/long-page.astro @@ -32,6 +32,8 @@ import Layout from '../components/Layout.astro';
+ + Morbi tristique senectus et netus et. Neque aliquam vestibulum morbi blandit cursus risus. Pharetra pharetra massa massa ultricies mi quis. Sit amet aliquam id diam maecenas ultricies mi eget mauris. Ultrices mi tempus imperdiet nulla malesuada. At consectetur lorem donec massa sapien faucibus et molestie. Non sodales neque sodales ut etiam. Eget nunc lobortis mattis aliquam faucibus purus in massa tempor. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Diam vulputate ut pharetra sit. Felis donec et odio pellentesque diam. Mollis aliquam ut porttitor leo. Vitae nunc sed velit dignissim sodales. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Aliquet enim tortor at auctor urna nunc id cursus. Bibendum at varius vel pharetra vel turpis nunc eget. Mattis molestie a iaculis at erat. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Nunc congue nisi vitae suscipit. Donec massa sapien faucibus et molestie ac. Nec feugiat nisl pretium fusce. At imperdiet dui accumsan sit amet nulla facilisi. Sed viverra tellus in hac. diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index 944d40343..4b4d64915 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -502,3 +502,24 @@ test.describe('View Transitions', () => { await downloadPromise; }); }); + +test('Scroll position is restored on back navigation from page w/o ViewTransitions', async ({ + page, + astro, +}) => { + // Go to middle of long page + await page.goto(astro.resolveUrl('/long-page#click-external')); + + let locator = page.locator('#click-external'); + await expect(locator).toBeInViewport(); + + // Go to a page that has not enabled ViewTransistions + await page.click('#click-external'); + locator = page.locator('#three'); + await expect(locator).toHaveText('Page 3'); + + // Scroll back to long page + await page.goBack(); + locator = page.locator('#click-external'); + await expect(locator).toBeInViewport(); +});