Content/Styles flicker during navigation on cloudflare pages & chrome

[danthegoodman1]

What version of starlight are you using?

0.29.2

What version of astro are you using?

4.16.10

What package manager are you using?

npm

What operating system are you using?

mac

What browser are you using?

chrome (I do not observe this on safari)

Describe the Bug

See the flickering in this video (slowed down frame by frame)

Screen.Recording.2024-11-21.at.10.18.05.AM.mov

Apologies for the low resolution, but you can see that on navigation it:

1. Drops the side nav
2. Takes 1 frame before it highlights the correct item in the right table of contents

I do not observe this behavior on https://starlight.astro.build/environmental-impact/ unless i haven't clicked on another page for a while, then I can observe it.

I don't observe this running locally, or on stackblitz, but I do see it on cloudflare pages. I've also tried incognito, clearing cache, etc. I also observe this just reloading the page, it seems page content renders in after

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-dwnlvm?file=tailwind.config.mjs <- I can't repro on this, but this is the same setup minus some md file content

Participation

• I am willing to submit a pull request for this issue.

[danthegoodman1]

I also have updated chrome, still behaves this way. Also no errors in console or network tab

[danthegoodman1]

Screen.Recording.2024-11-21.at.12.29.11.PM.mov

I wonder if the behavior is linked to network speed? If i emulate a 3g network locally i can see a similar effect

[danthegoodman1]

I actually don't get this on a registered domain, just the .pages.dev domain...