Split out of #33, which fixed the canvas painting black. What remains is smaller and has a different cause.
Symptom
Clicking a nav link still shows a brief flash. The maintainer's assessment after #35: "还是迅速闪一下，但是已经很好了，非常快，基本上不影响体验" — still a quick flash, but much better, very fast, basically doesn't affect the experience.
Cause
This is an MPA. Every navigation is a full document load: the browser discards the old document and paints a new one, so the fixed backdrop <img>, the tint layer and the WebGL island are all torn down and rebuilt from scratch each time. No amount of work on the canvas removes that — the canvas is a symptom of the page being rebuilt, not the cause.
Consistent with measurement: sampling a bare-backdrop strip across a navigation shows the same behaviour whether or not the WebGL island mounts.
The fix, if it is worth it
Astro's <ClientRouter /> (View Transitions). Navigation becomes client-side, the DOM survives across pages, and the backdrop is never rebuilt — the flash disappears by construction rather than by tuning.
Why it was not done
The maintainer judged the current state acceptable, and the change is disproportionate to the symptom. It alters when every client:* island mounts, so it needs re-verification of at least:
- the
client:media gate on RippleBackground — does it re-evaluate per navigation?
- Pagefind's search page, which loads its module dynamically and caches it on
window
- Giscus, which injects a
<script> per news item and cleans up on unmount
- scroll position and focus handling across transitions
Worth knowing either way
Adopting ClientRouter would also make #34 moot for navigations, since the canvas would no longer be re-created — the static-image-to-canvas handover would happen once per session instead of once per page.
Split out of #33, which fixed the canvas painting black. What remains is smaller and has a different cause.
Symptom
Clicking a nav link still shows a brief flash. The maintainer's assessment after #35: "还是迅速闪一下，但是已经很好了，非常快，基本上不影响体验" — still a quick flash, but much better, very fast, basically doesn't affect the experience.
Cause
This is an MPA. Every navigation is a full document load: the browser discards the old document and paints a new one, so the fixed backdrop
<img>, the tint layer and the WebGL island are all torn down and rebuilt from scratch each time. No amount of work on the canvas removes that — the canvas is a symptom of the page being rebuilt, not the cause.Consistent with measurement: sampling a bare-backdrop strip across a navigation shows the same behaviour whether or not the WebGL island mounts.
The fix, if it is worth it
Astro's
<ClientRouter />(View Transitions). Navigation becomes client-side, the DOM survives across pages, and the backdrop is never rebuilt — the flash disappears by construction rather than by tuning.Why it was not done
The maintainer judged the current state acceptable, and the change is disproportionate to the symptom. It alters when every
client:*island mounts, so it needs re-verification of at least:client:mediagate onRippleBackground— does it re-evaluate per navigation?window<script>per news item and cleans up on unmountWorth knowing either way
Adopting ClientRouter would also make #34 moot for navigations, since the canvas would no longer be re-created — the static-image-to-canvas handover would happen once per session instead of once per page.