@jekrch/react-viewport-lightbox 0.3.0 → 0.4.0

package/dist/styles.css

@@ -48,6 +48,10 @@
   background-color: rgba(0, 0, 0, 0);
   transition: background-color var(--rvl-anim-duration) ease-out;
   -webkit-tap-highlight-color: transparent;
+  /* Prevent iOS Safari from auto-inflating text on rotation to landscape and
+     failing to restore it on rotation back to portrait. */
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 .rvl-root.rvl-visible {
   background-color: var(--rvl-overlay-bg);
@@ -206,7 +210,11 @@
   width: 100%;
   height: 100%;
   touch-action: none;
-  pointer-events: none;
+  /* The track spans the stage and owns every gesture (swipe/pan/pinch) plus the
+     backdrop close, so it must receive pointer/touch events across its whole
+     area — not just where the image sits. Adjacent panels stay
+     pointer-events:none so they never intercept a gesture in flight. */
+  pointer-events: auto;
   opacity: 0;
   transition: opacity var(--rvl-anim-duration) ease-out;
 }
@@ -221,6 +229,15 @@
 .rvl-track-visible {
   opacity: 1;
 }
+/* Promote the track to its own compositing layer only while a swipe is in
+   flight (dragging or the commit/snap-back animation). The track is what the
+   swipe transforms, so this is where the hint belongs — a permanent
+   `will-change` on the images promoted the wrong elements and pinned three
+   full-size image layers for the viewer's whole life, which iOS flickers on.
+   Cleared the moment the gesture settles so the layers are released. */
+.rvl-track-swiping {
+  will-change: transform;
+}
 
 .rvl-adjacent {
   position: absolute;
@@ -251,7 +268,6 @@
   object-fit: contain;
   border-radius: var(--rvl-radius);
   max-width: 96vw;
-  will-change: transform;
 }
 
 /* Loading spinner: shown only when the opening image is slow to load. Centered
@@ -410,6 +426,14 @@
      edge slots) stays visible and on top — even while an overlay slides in. */
   z-index: 15;
   pointer-events: none;
+  /* Fade the overlay with the rest of the chrome (backdrop/bars/track) so an
+     open drawer/graph fades out on close instead of popping out of existence
+     the instant the viewer unmounts. */
+  opacity: 0;
+  transition: opacity var(--rvl-anim-duration) ease-out;
+}
+.rvl-root.rvl-visible .rvl-overlay {
+  opacity: 1;
 }
 .rvl-overlay > * {
   pointer-events: auto;
@@ -423,6 +447,7 @@
   .rvl-bar,
   .rvl-stage,
   .rvl-track,
+  .rvl-overlay,
   .rvl-btn,
   .rvl-nav-btn {
     transition-duration: 0.01ms !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jekrch/react-viewport-lightbox",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A headless-capable, touch-friendly React image viewer and lightbox with zoom, pan, and swipe.",
   "type": "module",
   "sideEffects": [