Reapply "Fix missing content issue, closes #198"

This reverts commit 60c7c91e8a.

Also used a longer timeout
This commit is contained in:
Lea Verou
2024-12-10 10:03:30 -05:00
parent 6da942083c
commit 1d822db30d

View File

@@ -43,15 +43,23 @@ body {
-webkit-text-size-adjust: none;
}
/* Show custom elements only after they're registered */
:where(:not(:defined, [did-ssr])),
:where(:not(:defined, [did-ssr])) * {
opacity: 0;
@keyframes wa-fade-in {
from {
opacity: 0;
}
}
:where(:defined) {
opacity: 1;
transition: 0.1s opacity;
/* Show custom elements only after they're registered */
:where(:not(:defined, [did-ssr])) {
&,
& * {
/*
* if an element gets defined earlier than 800ms, the animation stops applying so it just appears (no fade)
* If it takes somewhere between 800 and 1000 ms, then you may get an interrupted fade
* If an element takes longer than 1000ms to get defined, it fades in over 200ms
*/
animation: 200ms 800ms wa-fade-in both;
}
}
/* Content flow */