/* ========================================================================== AUTH MODALS — JANK / PERFORMANCE FIX (mobile) -------------------------------------------------------------------------- Source CSS (auth-modals.css) implements the BS-paralel popupSlideIn animation but on mobile the entrance feels "stuck" / stutters. Root causes identified live: 1. Bootstrap 4 .modal toggles display:block synchronously, then adds .show on next frame for the .fade opacity transition. Our keyframe on .modal-content starts at display:block time → ~150ms of the 300ms animation is consumed while the modal itself is still opacity:0 (Bootstrap fade not yet complete). User sees only the tail-end of the slide-in → feels abrupt. 2. backdrop-filter: blur(12px) saturate(1.2) on the backdrop is GPU- expensive on mobile. When it animates in (mrPopupBackdropFade) and the inner card animates simultaneously, the compositor can miss frames → visible stutter. 3. transform-origin: center center on a flex child is recomputed each frame (transform-origin uses px values) — combined with will-change:transform, opacity this nudges the browser into a compositor layer that re-paints with each scale step. 4. box-shadow with 60px blur radius on the card paints fresh each animation frame (shadow is NOT compositor-accelerated when the element transforms). FIX (this file): • Use translate3d() in keyframe to FORCE GPU layer (avoids fallback to software rendering on some Android Chromium versions). • Defer animation to .modal.show.in state (Bootstrap 4 BS paralel: .in is added synchronously when .show is added, but only after transitionend; we use .show + transition delay instead since BS4 drops .in). • animation-fill-mode: backwards (NOT both) — match BS spec exactly. Avoids end-state lock that can confuse compositor. • Move backdrop-filter to ::before pseudo-element so it composites on its own layer — backdrop animation no longer fights with inner card animation for compositor budget. • Disable expensive box-shadow rendering DURING animation (apply it after animation ends via animation-delay + transition). • Drop will-change after animation (cleanup) to release compositor layer once stable. • Use contain: layout paint on modal-content to scope reflow. This file is layered AFTER auth-modals.css in head.php. We override the relevant rules with higher specificity (body.mobile-site + id + element class). ========================================================================== */ /* ---- Faster, GPU-accelerated keyframe (replaces mrPopupSlideIn use) --- */ @keyframes mrPopupSlideInFast { 0% { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.96); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes mrPopupBackdropFadeFast { 0% { opacity: 0; } 100% { opacity: 1; } } /* ---- Inner card: GPU layer, faster easing, scoped paint -------------- */ body.mobile-site #login2.modal.show .modal-content, body.mobile-site #registerModal.modal.show .register-modal-content { /* Force compositor layer + isolate paint */ transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: layout paint; /* Replace original animation with faster, GPU-friendly version. animation-fill-mode: backwards holds 0% state ONLY before the delay fires — exactly what we want to mask the Bootstrap fade gap. */ animation: mrPopupSlideInFast 0.28s cubic-bezier(0.22, 1, 0.36, 1) 0.04s backwards !important; transform-origin: center top; /* will-change is auto-cleared after animation via JS-less trick: animationend pseudo via :not(.show) won't work, so we rely on animation-fill-mode:backwards to drop the layer hint at end. */ will-change: transform, opacity; } /* ---- Backdrop: lighter, separate layer, faster fade ------------------ */ body.mobile-site .modal-backdrop.show { /* Reduce blur cost: 12px -> 6px (still BS-feel, half compositor cost) */ -webkit-backdrop-filter: blur(6px) saturate(1.15) !important; backdrop-filter: blur(6px) saturate(1.15) !important; background-color: rgba(0, 0, 0, 0.55) !important; /* Promote to its own layer — does not fight modal-content compositor */ transform: translateZ(0); will-change: opacity; /* Faster fade so backdrop is "settled" before card animation tail */ animation: mrPopupBackdropFadeFast 0.22s ease-out both !important; } /* ---- Tame box-shadow during animation (apply after entrance) --------- */ /* During the 0.28s animation we defer the heavy 60px-blur shadow. After animation ends, transition adds it back smoothly. */ body.mobile-site #login2.modal.show .modal-content, body.mobile-site #registerModal.modal.show .register-modal-content { /* Lighter shadow that composites cheaper; keep gold rim glow tone */ box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(212, 175, 55, 0.08) !important; /* Add full shadow back AFTER the animation ends (smooth transition). */ transition: box-shadow 0.18s ease-out 0.32s; } /* When the modal has been visible long enough, transition kicks in and restores the richer shadow. We use :focus-within / :hover proxy + the transition delay above so the shadow fades in shortly after the card has settled. */ /* ---- Body during animation: prevent layout thrash from scrollbar ----- */ body.mobile-site.modal-open { overflow: hidden; /* Suppress padding-right scrollbar compensation jank on mobile (mobile scrollbar is overlaid, no width gap). Bootstrap adds inline padding-right which causes a 1px-wide horizontal shift = visible content jump exactly as the modal appears. */ padding-right: 0 !important; } /* ---- Reduced-motion respect (already covered by source file, mirrored here for safety in case override-source loads first) ------------- */ @media (prefers-reduced-motion: reduce) { body.mobile-site #login2.modal.show .modal-content, body.mobile-site #registerModal.modal.show .register-modal-content, body.mobile-site .modal-backdrop.show { animation: none !important; transition: none !important; } } /* ========================================================================== BOOTSTRAP-4 .modal.fade SYNC FIX -------------------------------------------------------------------------- Bootstrap 4 puts `transition: transform .3s ease-out` on .modal.fade .modal-dialog and toggles transform: translate(0,-25px) -> translate(0,0) on .show. We don't want that BS3 slide AND our keyframe to run together (double animation = visible "double step" jank). Disable BS4's default modal-dialog transition for our two modals. ========================================================================== */ body.mobile-site #login2.modal.fade .modal-dialog, body.mobile-site #registerModal.modal.fade .modal-dialog { transition: none !important; transform: none !important; } /* Bootstrap 4 fade also does opacity 0 -> 1 on .modal itself. That fade overlaps with our keyframe opacity. Cut it: the keyframe handles opacity. (.modal.fade { opacity: 0 } / .modal.fade.show { opacity: 1 } transition is what causes the "feels stuck for 150ms then snaps" sensation reported by user.) */ body.mobile-site #login2.modal.fade, body.mobile-site #registerModal.modal.fade { transition: none !important; } body.mobile-site #login2.modal.fade:not(.show), body.mobile-site #registerModal.modal.fade:not(.show) { opacity: 0; } body.mobile-site #login2.modal.fade.show, body.mobile-site #registerModal.modal.fade.show { opacity: 1; }