You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
30 lines
2.0 KiB
Markdown
30 lines
2.0 KiB
Markdown
---
|
|
# vibed-59dh
|
|
title: 'bit-by-bit: [hidden] attribute defeated by CSS display rules — celebration overlay stuck onscreen'
|
|
status: completed
|
|
type: bug
|
|
priority: normal
|
|
created_at: 2026-07-14T04:30:04Z
|
|
updated_at: 2026-07-14T04:32:45Z
|
|
---
|
|
|
|
User report: after onboarding, a bare "You did it!" celebration modal covers the app and its buttons appear dead.
|
|
|
|
Root cause: `.celebration-overlay`, `.onboarding-overlay` set `display:flex` (and `#artworkActive` has inline `display:flex`, `.upload-preview` sets `display:flex`). Author CSS beats the UA stylesheet's `[hidden]{display:none}`, so toggling the `hidden` attribute in JS has no visual effect on these elements. The celebration overlay was therefore visible from page load with placeholder text, and hideCelebration() couldn't hide it. jsdom tests missed it (no layout).
|
|
|
|
Fix: global `[hidden]{ display:none !important; }` rule (also covers the inline-style case on #artworkActive).
|
|
|
|
- [x] Apply global [hidden] rule
|
|
- [x] Verify in a real headless browser: celebration hidden on load, onboarding visible on first run, hides after finishing
|
|
|
|
## Summary of Changes
|
|
|
|
Added `[hidden]{ display:none !important; }` to the base styles in `bit-by-bit/index.html` (with a comment explaining why). This makes the `hidden` attribute authoritative over author display rules (`.celebration-overlay`/`.onboarding-overlay` flex, `#artworkActive` inline flex, `.upload-preview` flex).
|
|
|
|
Verified with headless Firefox screenshots (fresh profile each):
|
|
- Fresh load: onboarding wizard visible, no stray celebration modal.
|
|
- Seeded mid-progress state: main app renders, 3/4 pixels · 75%, overlays hidden.
|
|
- Final check-off: image completes to 4/4 · 100%, canvas keeps showing the finished art via the pendingCelebration snapshot, gallery count increments — confirming the celebration flow renders correctly in a real browser.
|
|
|
|
Lesson recorded: jsdom flow tests check the hidden property, not computed style — visibility bugs need a real-layout browser check.
|