useweb/drizzli
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home loading bug and flashes fixes

Browse Source
This commit is contained in:
Vincent van der Wal
2026-08-06 21:10:15 +02:00
parent 1c5ea2b52e
commit c3bb6de49c
10 changed files with 256 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/layout.css
+22 -24
View File
@@ -133,23 +133,6 @@
@apply bg-background text-foreground;
}
/* Page cross-fade: driven from routes/+layout.svelte, revealed when the new
page reports its data has arrived. */
.page-fade {
transition: opacity 320ms ease;
}
.page-fade-hidden {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.page-fade {
transition: none;
}
.page-fade-hidden {
opacity: 1;
}
}
/* ── Day switching ────────────────────────────────────────────────────────
Only the three regions whose content depends on the selected day take part
in the cross-fade. Everything else keeps its pixels: the `day-switch`
@@ -210,15 +193,30 @@
}
}
/* Theme changes cross-fade the whole document in one pass (see
routes/+layout.svelte). Doing it as a view transition instead of a blanket
`* { transition }` matters: that blanket rule also stretched every
/* Whole-document cross-fade, for both a page swap and a theme change (see
routes/+layout.svelte). Doing the theme as a view transition instead of a
blanket `* { transition }` matters: that blanket rule also stretched every
component's own hover and focus transitions to 400ms for the duration of
the switch, which read as lag on interactive controls. */
::view-transition-old(root),
the switch, which read as lag on interactive controls.
The default cross-fade is NOT opacity-neutral. Both snapshots are opaque
and the browser fades one out while fading the other in, so halfway
through, the two together cover only ~75% of the screen and the page
background shows through everything: the whole screen visibly dips, which
reads as a flash. Holding the outgoing snapshot at full opacity and fading
only the incoming one in on top of it (it is painted above) keeps every
frame fully covered. */
::view-transition-old(root) {
animation: none;
opacity: 1;
}
::view-transition-new(root) {
animation-duration: 400ms;
animation-timing-function: ease;
animation: root-fade-in 400ms ease;
}
@keyframes root-fade-in {
from {
opacity: 0;
}
}
/* Fallback for browsers without view transitions: fade the colours only. */