diff --git a/.changeset/fix-font-head-swap.md b/.changeset/fix-font-head-swap.md new file mode 100644 index 000000000000..951845eee525 --- /dev/null +++ b/.changeset/fix-font-head-swap.md @@ -0,0 +1,7 @@ +--- +'astro': patch +--- + +Fixes font flash (FOUT) during ClientRouter navigation by preserving inline ` + + + + +

Font Page 1

+ go to font page 2 + + diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/font-page-two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/font-page-two.astro new file mode 100644 index 000000000000..647b62df149e --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/font-page-two.astro @@ -0,0 +1,22 @@ +--- +import { ClientRouter } from 'astro:transitions'; +--- + + + Font Page 2 + + + + + +

Font Page 2

+ go to font page 1 + + diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index 591e8ef584c0..4085d3ffd6c9 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -1759,4 +1759,20 @@ test.describe('View Transitions', () => { await new Promise((resolve) => setTimeout(resolve, 1000)); expect(lines.join('')).toBe(''); }); + + test('Inline styles and font preloads persist through head swap', async ({ page, astro }) => { + // Go to font page 1 + await page.goto(astro.resolveUrl('/font-page-one')); + let p = page.locator('#font-page-one'); + await expect(p, 'should have content').toHaveText('Font Page 1'); + + // Navigate to font page 2 (same inline styles and font preloads) + await page.click('#click-font-two'); + p = page.locator('#font-page-two'); + await expect(p, 'should have content').toHaveText('Font Page 2'); + + // Verify original inline styles and font preloads are still present after navigation + await expect(page.locator('#style')).toHaveCount(1); + await expect(page.locator('#preload')).toHaveCount(1); + }); }); diff --git a/packages/astro/src/transitions/swap-functions.ts b/packages/astro/src/transitions/swap-functions.ts index 03bf45c68d16..9fb7e505118f 100644 --- a/packages/astro/src/transitions/swap-functions.ts +++ b/packages/astro/src/transitions/swap-functions.ts @@ -161,6 +161,23 @@ const persistedHeadElement = (el: HTMLElement, newDoc: Document): Element | null const href = el.getAttribute('href'); return newDoc.head.querySelector(`link[rel=stylesheet][href="${href}"]`); } + // Preserve inline