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' });
+ }
}
};