The Vanishing Act · Visibility Semantics
Five payloads hidden five ways — display:none, visibility:hidden, opacity:0, off-screen and aria-hidden — every one still attached to the DOM.
Five ways to disappear, all still in the DOM. Which does your framework call "visible"?
Visibility Semantics is an easy Frames, Windows & DOM challenge on Fun UI Playground. Five payloads hidden five ways — display:none, visibility:hidden, opacity:0, off-screen and aria-hidden — every one still attached to the DOM. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “visibility-”, and the techniques it exercises are visibility vs presence, display/visibility/opacity, off-screen elements, aria-hidden semantics.
At a glance
- Category
- Frames, Windows & DOM
- Difficulty
- easy
- Teaches
- visibility vs presence · display/visibility/opacity · off-screen elements · aria-hidden semantics
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixedvisibility-
Selectors on this page
| Locator | What it is |
|---|---|
#visibility-display #visibility-visibility #visibility-opacity #visibility-offscreen #visibility-aria | Targets: #visibility-display, #visibility-visibility, #visibility-opacity, #visibility-offscreen, #visibility-aria — all attached at all times |
#visibility-toggle | Each is hidden by its namesake technique; #visibility-toggle reveals every one at once |
#visibility-report | The state is summarized in #visibility-report |
Frequently asked questions
Which CSS techniques make an element "not visible" to a test framework?
display:none and visibility:hidden read as not-visible almost everywhere. opacity:0 and off-screen positioning usually still read as visible, and aria-hidden changes the accessibility tree rather than visibility at all. All five targets stay attached to the DOM throughout.
How do I compare what my framework calls visible?
Run your visibility check against #visibility-display, #visibility-visibility, #visibility-opacity, #visibility-offscreen and #visibility-aria, then compare with the page's own summary in #visibility-report. #visibility-toggle reveals all five at once.
More Frames, Windows & DOM
- Multiverse Portals · Multiple Windows
- Hero Gazette Editor · iFrame Editor
- Mission Control · Nested Frames
- Droid Memory Core · Shadow DOM
- The Waiting Room · Modal & Focus Trap
- The Reshuffled Floor · Challenging DOM
- All Frames, Windows & DOM challenges
Updated
Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.