Skip to content

v0.4.2

Latest

Choose a tag to compare

@CorySchulz CorySchulz released this 21 Sep 19:15
· 6 commits to main since this release
892b95d

container — where the (the element that actually flies) gets appended. Previously always document.body. Now an Element or a function returning one, settable on the constructor or per-show() call (per-call wins, and the hide leg flies in the same container as its show).

Why: a blob in paints under the browser's top layer, so any flight whose destination sits inside an open showModal() dialog was invisible — you'd see nothing move, then the destination appear. Passing a container inside that dialog's subtree (container: () => thumb.closest('dialog:modal')) puts the blob in the same layer and the flight shows. That's what lets the Tarot lightbox fly out of a thumbnail inside Pyramid's task dialog.

One subtlety it handles for you: if the container (or an ancestor) has a transform, filter, contain, etc., it becomes the containing block for the fixed-position blob and viewport coordinates would land in the wrong place. Rather than walking computed styles for every property that can cause this, the engine appends the blob at top:0; left:0, measures where it actually landed, and subtracts that offset from its own frames — one layout read per flight, honest to whatever the browser does. Only a translation can be undone (a scaled/rotated host still scales the blob), which is documented.