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...

[danthegoodman1]

bumping

[HiDeoo]

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

That's quite interesting, and I'm personally not sure why that would be the case.

I uploaded the repro you shared on pages.dev and I cannot seem to reproduce the issue you're facing. Here is a video with no cache and network throttling to 3G:

repro.mp4

Could you check if you're seeing the same issue on this page: https://starlight-issue-2621.pages.dev/guides/example/ ?

If not, would you be able to share a reproduction on pages.dev that showcases the issue you're facing?

[danthegoodman1]

@HiDeoo I get it on your provided example too

It's hard to record since it's so fast even at 3G, and sometimes the recording doesn't even capture it (I'm guessing bc my monitor is 144hz but recording is only 60fps)

[HiDeoo]

So for me, to get close to a similar behavior as the one you're seeing, I had to throttle the network to 3G and add a 20x CPU throttling too. With that, when recording frame by frame (it's not visible otherwise), I can definitely see some frames with partially rendered content.

From what I can see so far, and considering a frame is rendered every 16ms pretty much, it's just the browser deciding to do a paint at some point in the middle of processing the entire markup which leads to the partial rendering. It does not look like extra or unnecessary work is done during this time. I guess depending on the machine, the network speed, and even the content the visual result might be different.

What I don't really understand yet so far, and also making me doubt that what I'm describing is the same as what you're seeing, is why you would only observe this behavior on the .pages.dev domain 🤔

[danthegoodman1]

Yeah it’s super weird, and I’ve got gigabit symmetric fiber with an m3 max chip so it’s def not a network or resource issue on my side