MODAL LAB

Modal edge cases

DOM patterns that Report tools might miss, collected in one place. Keep zustand and opacity modal state after navigating between pages.

conditional render

Zustand boolean

Mount/unmount via global store open state

opacity-0

Opacity

Keep DOM + toggle opacity/pointer-events

hidden / unmount

Display none

Exists in DOM only when open

visibility

Visibility hidden

Hide visually with invisible class

transform

Transform off-screen

Move off-screen with translate

overflow-y-auto

Vertical scroll

Vertical scroll in modal body

overflow-x-auto

Horizontal scroll

Horizontal scroll for wide tables

overlay scroll

Nested scroll overlay

Overlay itself scrolls

z-index stack

Nested modal stack

Two-level modal on modal

absolute in scroll

Inline positioned

Placed inside parent container without fixed

Inline modal host (scroll container)

Modal positioned absolute inside this scroll area without a fixed portal. Reproduces cases where background scroll overlaps.

Scroll filler block 1

Scroll filler block 2

Scroll filler block 3

Scroll filler block 4

Scroll filler block 5

Scroll filler block 6

Scroll filler block 7

Scroll filler block 8