Logs from the user's last session showed that after walking through
all images and trying to go back from the last one, a backdrop click
fired (target===overlay) and closed the modal — even though the user
believed they clicked the prev arrow. Two reinforcing causes:
1. The image (.lightbox-image) is a sibling AFTER the buttons in the
DOM with no z-index, so paint order put the image on top of the
absolute-positioned arrows. Where the image's max-width/height box
overlapped the arrows, clicks landed on the image instead of the
arrow, and clicks in the gap between image and arrow hit the
overlay backdrop.
2. Even when an arrow handler did fire, the click bubbled up to the
overlay's click handler. While target===overlay was false in that
path, the next click sometimes did land on the backdrop, and the
close button had the same exposure.
Fix:
- Stack the controls above the image: image gets z-index:1, every
.lightbox button gets z-index:2.
- stopPropagation on prev/next/close button clicks AND on the image
click — guarantees they can never bubble into the overlay's
backdrop-close handler. Backdrop close still works on actual
backdrop clicks.
- Bump button background to rgba(0,0,0,.55) (was .08 white on dark)
so the arrows are clearly visible against the image.
Also strip the [lazyflat.lightbox] DEBUG(lightbox) tracer logs and
the window.error catch-all — original symptom is fixed and the
existing flow is confirmed working in user's logs.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
EiSiMo
e7f5cb9bee