withastro / starlight

🌟 Build beautiful, accessible, high-performance documentation websites with Astro
https://starlight.astro.build
MIT License
5.25k stars 539 forks source link

Content/Styles flicker during navigation on cloudflare pages & chrome #2621

Open danthegoodman1 opened 1 week ago

danthegoodman1 commented 1 week ago

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)

https://github.com/user-attachments/assets/c0b17c52-337b-4646-b98a-c38ce9b8946f

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

danthegoodman1 commented 1 week ago

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

danthegoodman1 commented 1 week ago

https://github.com/user-attachments/assets/32524d39-a816-4b51-befb-e66cce820b9a

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

danthegoodman1 commented 1 week ago

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