moritz/lazyflat
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

fix(lightbox): keep arrow clicks from leaking to backdrop close, raise controls above image

Browse source 
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>
This commit is contained in:
EiSiMo 2026-04-23 13:17:04 +02:00
parent c379bc989f
commit e7f5cb9bee
2 changed files with 18 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

9
web/static/app.css
View file

@ -142,12 +142,13 @@ body:has(#v_map:checked) .view-map { display: block; }
animation: lightbox-fade .15s ease-out; }
.lightbox-image { max-width: 92vw; max-height: 88vh; object-fit: contain;
border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
background: #0c1726; }
.lightbox button { background: rgba(255,255,255,.08); color: #fff; border: 0;
background: #0c1726; position: relative; z-index: 1; }
.lightbox button { background: rgba(0, 0, 0, .55); color: #fff; border: 0;
border-radius: 9999px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s, transform .05s; padding: 0; }
.lightbox button:hover { background: rgba(255,255,255,.22); }
transition: background .15s, transform .05s; padding: 0;
z-index: 2; }
.lightbox button:hover { background: rgba(0, 0, 0, .8); }
.lightbox button:active { transform: scale(.96); }
.lightbox-close { position: absolute; top: 1.25rem; right: 1.25rem;
width: 2.5rem; height: 2.5rem; }