overlay inherited opacity:1 from .lightbox-overlay CSS, so the moment
it was appended to the DOM it painted a full-opacity black background.
this showed for ~24ms (the time until the image loaded and start() ran
the first frame that sets opacity 0), visible as a black flash before
the fade-in.
set overlay.style.opacity = '0' right after creating it, so it is
transparent when appended; start()'s transition then fades it to 1 as
intended.
several bugs found via in-browser debugging, all in lightbox.js + the
blur-up CSS:
1. DOMRect attribute mismatch: getBoundingClientRect returns .width/
.height, but code read .w/.h -> NaN transforms. map rectOf() to a
uniform {x,y,w,h}.
2. zoom scale base was the huge original natural size (2942px), so the
centered state collapsed to a tiny scale and the open animation ran
backwards (shrink). base the scale on originRect instead: first
frame is the in-article image at scale 1, centered state scales to
target.w/originRect.w. open is always grow, close always shrink.
3. scroll-to-close fired on a phantom scroll jump: the oversized
original img (layout size = naturalW) expanded the document's
scrollable area. set img layout size explicitly and add
overflow:hidden on the (position:fixed) overlay so the img cannot
expand the body.
4. first open animation jumped from the wrong position: a single rAF
was not enough to commit the no-transition first frame. use a forced
reflow (offsetHeight) + double-rAF before starting the transition.
5. blur-up full layer stuck at opacity 0 until a forced reflow (opening
the lightbox) repainted it. drop the opacity transition on .blur-img-
full and set opacity:1 from JS on load (deterministic, no repaint
race). mark the container .is-loaded and hide the placeholder via
the container class.
6. a 16px grey gap above in-article images: .md-content img { margin:
1rem 0 } applied to the absolute .blur-img-full too, pushing it
down. reset margin:0 / max-width:none on the blur-up img layers.
drop ImageViewer; render .blur-img with a lightbox-single class (the
class, not a data attribute, because Dioxus' typed span elements reject
arbitrary data-* attrs). lightbox.js now keys single-mode off the
lightbox-single class instead of data-single. cover uses ?w=20
placeholder + ?w=1200 display; SSR writes --ar from real dimensions.
add prev/next arrow buttons (only in gallery mode with >1 image) and
ArrowLeft/ArrowRight keyboard handling. switching uses a 150ms
fade-out -> swap src -> fade-in (no fly, matching Medium). originNode
is updated to the new image so close/scroll-close flies back to the
right place; openScrollY is reset to keep scroll-close baseline valid.
bindInteractions() was only called from start(), which waits for the
image load event. during the load window Esc/scroll/backdrop-click did
nothing. bind right after appending the overlay so the lightbox is
closable throughout the load.
click a .blur-img to open: record its viewport rect, the lightbox img
starts at that position/size and transforms to centered (Medium-style
origin-aware zoom). close flies back to the live originNode rect.
scroll-to-close: while open, any window scroll drives the image back
to its (moving) position via per-frame rect tracking + linear
interpolation; the article keeps its scroll position on close.
Esc + click-on-backdrop close; click-on-image does not close.
prefers-reduced-motion falls back to fade-only / immediate close.
