mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-13 17:10:06 +00:00
fix: inline splash CSS to prevent SPA fallback breakage on cloud environments (#9849)
## Summary Inline splash screen CSS into `index.html` to fix broken loading animation on cloud/ephemeral environments. ## Changes - **What**: On cloud/ephemeral environments (e.g. `fe-pr-*.testenvs.comfy.org`), SPA fallback serves `index.html` for unknown paths. The `<link href="splash.css">` request resolves to `/cloud/splash.css`, which the server does not find as a static file — so it returns `index.html` with `200 OK`. The browser receives HTML instead of CSS, the CSS parser silently ignores it, and the splash screen renders without any styles or animations. - Inlined `splash.css` directly into `index.html` `<style>` block — eliminates the external request entirely - Moved `splash.css` to `src/assets/` for content-hashed Vite processing as source of truth - Removed `public/splash.css` ## Review Focus - The inline CSS is byte-for-byte identical to the original `public/splash.css` - `src/assets/splash.css` preserved as canonical source for future changes [screen-capture (1).webm](https://github.com/user-attachments/assets/06729641-d1fd-47aa-9dd4-4acd28c2cfcf) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9849-fix-inline-splash-CSS-to-prevent-SPA-fallback-breakage-on-cloud-environments-3226d73d365081418741eb0944a74977) by [Unito](https://www.unito.io) Co-authored-by: Amp <amp@ampcode.com>
This commit is contained in:
55
index.html
55
index.html
@@ -47,7 +47,60 @@
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="splash.css" />
|
||||
<style>
|
||||
/* Pre-Vue splash loader — inlined to avoid SPA fallback serving
|
||||
index.html instead of CSS on cloud/ephemeral environments */
|
||||
#splash-loader {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
contain: strict;
|
||||
}
|
||||
#splash-loader svg {
|
||||
width: min(200px, 50vw);
|
||||
height: auto;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
#splash-loader .wave-group {
|
||||
animation: splash-rise 4s ease-in-out infinite alternate;
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
#splash-loader .wave-path {
|
||||
animation: splash-wave 1.2s linear infinite;
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
@keyframes splash-rise {
|
||||
from {
|
||||
transform: translateY(280px);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-80px);
|
||||
}
|
||||
}
|
||||
@keyframes splash-wave {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-880px);
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#splash-loader .wave-group,
|
||||
#splash-loader .wave-path {
|
||||
animation: none;
|
||||
}
|
||||
#splash-loader .wave-group {
|
||||
transform: translateY(-80px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
</head>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user