From c24f70d91601dd3a6b5a84f04d61824e775e9b44 Mon Sep 17 00:00:00 2001 From: Martin Trapp <94928215+martrapp@users.noreply.github.com> Date: Mon, 9 Oct 2023 16:15:23 +0200 Subject: [PATCH] Fix flickering during view transitions (#8772) * Fix for #8711 * more descriptive changeset * chores, while we are at it ... --- .changeset/seven-seas-hide.md | 5 +++ .../src/components/listener-layout.astro | 34 +++++++++++++++++++ .../src/pages/listener-one.astro | 6 ++++ .../src/pages/listener-two.astro | 6 ++++ packages/astro/e2e/view-transitions.test.js | 22 ++++++++++++ packages/astro/src/transitions/router.ts | 12 +++++-- 6 files changed, 83 insertions(+), 2 deletions(-) create mode 100644 .changeset/seven-seas-hide.md create mode 100644 packages/astro/e2e/fixtures/view-transitions/src/components/listener-layout.astro create mode 100644 packages/astro/e2e/fixtures/view-transitions/src/pages/listener-one.astro create mode 100644 packages/astro/e2e/fixtures/view-transitions/src/pages/listener-two.astro diff --git a/.changeset/seven-seas-hide.md b/.changeset/seven-seas-hide.md new file mode 100644 index 000000000..1b758f404 --- /dev/null +++ b/.changeset/seven-seas-hide.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix flickering during view transitions diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/listener-layout.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/listener-layout.astro new file mode 100644 index 000000000..9f6265335 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/components/listener-layout.astro @@ -0,0 +1,34 @@ +--- +import { ViewTransitions } from 'astro:transitions'; +--- + + + + + +

Local transitions

+ + + + + diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/listener-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/listener-one.astro new file mode 100644 index 000000000..a331e52e2 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/listener-one.astro @@ -0,0 +1,6 @@ +--- +import ListenerLayout from '../components/listener-layout.astro'; +--- + + Go to listener two + diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/listener-two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/listener-two.astro new file mode 100644 index 000000000..35191a333 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/listener-two.astro @@ -0,0 +1,6 @@ +--- +import ListenerLayout from '../components/listener-layout.astro'; +--- + + Go to listener one + diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index f8bbad1cd..80342cb35 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -230,6 +230,28 @@ test.describe('View Transitions', () => { await expect(h, 'imported CSS updated').toHaveCSS('background-color', 'rgba(0, 0, 0, 0)'); }); + test('No page rendering during swap()', async ({ page, astro }) => { + let transitions = 0; + page.on('console', (msg) => { + if (msg.type() === 'info' && msg.text() === 'transitionstart') ++transitions; + }); + + // Go to page 1 + await page.goto(astro.resolveUrl('/listener-one')); + let p = page.locator('#totwo'); + await expect(p, 'should have content').toHaveText('Go to listener two'); + // on load a CSS transition is started triggered by a class on the html element + expect(transitions).toEqual(1); + + // go to page 2 + await page.click('#totwo'); + p = page.locator('#toone'); + await expect(p, 'should have content').toHaveText('Go to listener one'); + // swap() resets that class, the after-swap listener sets it again. + // the temporarily missing class must not trigger page rendering + expect(transitions).toEqual(1); + }); + test('click hash links does not do navigation', async ({ page, astro }) => { // Go to page 1 await page.goto(astro.resolveUrl('/one')); diff --git a/packages/astro/src/transitions/router.ts b/packages/astro/src/transitions/router.ts index e4dc9d52d..096f4abb5 100644 --- a/packages/astro/src/transitions/router.ts +++ b/packages/astro/src/transitions/router.ts @@ -146,18 +146,24 @@ function isInfinite(animation: Animation) { const updateHistoryAndScrollPosition = (toLocation: URL, replace: boolean, intraPage: boolean) => { const fresh = !samePage(toLocation); + let scrolledToTop = false; if (toLocation.href !== location.href) { if (replace) { history.replaceState({ ...history.state }, '', toLocation.href); } else { history.replaceState({ ...history.state, intraPage }, ''); - history.pushState({ index: ++currentHistoryIndex, scrollX, scrollY }, '', toLocation.href); + history.pushState( + { index: ++currentHistoryIndex, scrollX: 0, scrollY: 0 }, + '', + toLocation.href + ); } // now we are on the new page for non-history navigations! // (with history navigation page change happens before popstate is fired) // freshly loaded pages start from the top if (fresh) { scrollTo({ left: 0, top: 0, behavior: 'instant' }); + scrolledToTop = true; } } if (toLocation.hash) { @@ -166,7 +172,9 @@ const updateHistoryAndScrollPosition = (toLocation: URL, replace: boolean, intra // that won't reload the page but instead scroll to the fragment location.href = toLocation.href; } else { - scrollTo({ left: 0, top: 0, behavior: 'instant' }); + if (!scrolledToTop) { + scrollTo({ left: 0, top: 0, behavior: 'instant' }); + } } };