/* Pinch-to-zoom overlay (static/js/media-zoom.js). * * Every photo and video in FamilyHub lifts out of the page when you put two * fingers on it. The page keeps `maximum-scale=1` — native pinch is what broke * the fixed bottom nav on iOS — so the zoom is ours, drawn here. * * The zoomed media is a fixed-position layer transformed by JS; nothing in this * file positions it, so keep `transform`/`left`/`top` out of .fhz-item. */ .fhz { position: fixed; inset: 0; z-index: 3000; /* over the nav (100) and the story viewer (60) */ touch-action: none; /* the gesture is entirely ours from here on */ -webkit-user-select: none; user-select: none; } /* Until the pinch is big enough to stick, the overlay is only the media: the page must stay tappable underneath so a half-hearted pinch costs nothing. */ .fhz:not(.locked) { pointer-events: none; } .fhz-shade { position: absolute; inset: 0; background: #000; opacity: 0; /* JS fades it in with the pinch */ } .fhz-item { position: fixed; left: 0; top: 0; transform-origin: 0 0; object-fit: contain; /* the box JS gives it already matches the aspect */ max-width: none; max-height: none; display: block; will-change: transform; background: transparent; border-radius: inherit; } /* A video that has been lifted out of the feed leaves this behind so the card doesn't collapse while it's away. */ .fhz-hole { visibility: hidden; } .fhz-close { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0; opacity: 0; transition: opacity .18s ease; } .fhz.locked .fhz-close { display: flex; opacity: 1; } .fhz-close svg { width: 22px; height: 22px; } /* The page behind is held still by preventDefault on touchmove/wheel rather than `overflow: hidden` on — iOS forgets the scroll position when the document stops scrolling, and closing the zoom would jump the feed to top. */