mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-11 16:30:57 +00:00
fef2cab31e
*PR Created by the Glary-Bot Agent* --- ## Summary Fix the video position glitch on `/customers` caused by `c-projection.webp` loading. ## Root cause In `HeroSection.vue` the hero `<img>` for `c-projection.webp` had no `width`/`height` attributes, so the browser reserved no space for it. When the image finished loading, the layout shifted ~192px, pushing the `VideoPlayer` below it. `useHeroAnimation` registers a GSAP `ScrollTrigger` parallax against the video in `onMounted` (before the image is loaded), so the cached scroll geometry then went stale and the video visibly glitched. ## Fix - Add explicit `width="1568"` / `height="1763"` to the `<img>` (the image's native size) so the browser reserves the correct aspect-ratio'd space upfront. - Add `h-auto` so the height attribute doesn't override the responsive layout. - Refresh `ScrollTrigger` on the image's `@load` (with `refresh(true)` so measurements happen after layout has settled) as a defensive measure for any sub-pixel adjustments. ## Test coverage Added `apps/website/e2e/customers.spec.ts` with a regression guard that: 1. Asserts the hero `<img>` declares numeric `width`/`height` attributes. 2. Asserts the unloaded image still reserves vertical space (>100px), which is the exact property that prevents the video from jumping when the image finishes loading. Verified the test fails when the `width`/`height` attributes are removed and passes with the fix applied. ## Verification - `pnpm typecheck` clean. - `pnpm test:unit` (website app) — 30/30 pass. - `pnpm test:e2e customers.spec.ts --project=desktop` — passes. - ESLint + oxfmt clean on changed files. - Manual Playwright verification confirmed the video bounding rect stays at `top=785, height=628` through the full image load lifecycle. Reverting the fix in DevTools and re-loading the image reproduces the original ~192px shift. ## Out of scope `apps/website/src/components/contact/FormSection.vue` uses the same `c-projection.webp` pattern (also without `width`/`height`). It runs `useHeroAnimation` with `parallax: false`, so the symptom is much smaller — leaving as a follow-up to keep this PR minimal. - Fixes [FE-607](https://linear.app/comfyorg/issue/FE-607/bug-video-on-customers-shifts-position-when-c-projectionwebp-finishes) ## Screenshots  ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-12060-fix-website-prevent-video-glitch-when-c-projection-webp-loads-on-customers-3596d73d365081ebbcb8db25aaa5c451) by [Unito](https://www.unito.io) --------- Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com>
