/* * ios-fixes.css * iPhone / WebKit memory crash — targeted overrides for main.css * Add AFTER main.css in your : * * * DO NOT edit main.css directly for these fixes — keeping them * separate makes it easy to update the base template in future. */ /* ───────────────────────────────────────────────────────────── FIX 1: smooth scroll removed from :root ───────────────────────────────────────────────────────────── scroll-behavior: smooth on :root is a known WebKit/iOS bug trigger. When combined with IntersectionObserver and many composited layers, it causes the scroll engine to stall and can crash the tab. JS scrollTo({ behavior:'smooth' }) is used instead for the scroll-top button, so this is safe to disable globally. */ :root { scroll-behavior: auto; } /* ───────────────────────────────────────────────────────────── FIX 2: Gallery item — stop animating box-shadow ───────────────────────────────────────────────────────────── The original rule transitions BOTH transform AND box-shadow simultaneously. box-shadow is NOT GPU-accelerated on iOS — every frame triggers a full repaint of the element AND all its composited children. With 20+ cards this creates severe memory pressure. We transition transform only, and apply box-shadow instantly (no transition) via a class change. */ .gallery .gallery-item { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; box-shadow: none; } .gallery .gallery-item.lifted-row { transform: translateY(-12px) scale(1.03); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); } /* ───────────────────────────────────────────────────────────── FIX 3: will-change only on in-viewport cards ───────────────────────────────────────────────────────────── Setting will-change on ALL gallery cards tells WebKit to promote every single card to its own GPU compositing layer upfront. On iPhones with 20+ cards this alone can exhaust the GPU memory budget before any interaction. We scope will-change strictly to cards the IntersectionObserver has marked as visible (class added in main.js). */ .gallery .gallery-item { will-change: auto; } .gallery .gallery-item.in-viewport { will-change: transform; } /* ───────────────────────────────────────────────────────────── FIX 4: Disable all transitions on off-screen cards ───────────────────────────────────────────────────────────── Even with IntersectionObserver, if a card has an active CSS transition when it exits the viewport, WebKit keeps the compositing layer alive until the transition completes. Stripping transitions on :not(.in-viewport) cards means they are always immediately deallocatable. */ .gallery .gallery-item:not(.in-viewport), .gallery .gallery-item:not(.in-viewport) img, .gallery .gallery-item:not(.in-viewport) .gallery-links { transition: none !important; transform: none !important; will-change: auto !important; } /* ───────────────────────────────────────────────────────────── FIX 5: Remove GPU-compositing from gallery-links overlay ───────────────────────────────────────────────────────────── The gallery-links div uses opacity transitions. On iOS, any element that animates opacity gets its own compositing layer. With pointer-events already handled in main.css, we can limit this to in-viewport cards only. */ .gallery .gallery-item:not(.in-viewport) .gallery-links { opacity: 0; pointer-events: none; } /* ───────────────────────────────────────────────────────────── FIX 6: Harden image scale hover — contain it to in-viewport ───────────────────────────────────────────────────────────── The img scale(1.1) on hover is fine but should only apply when the card is actually visible. */ .gallery .gallery-item:not(.in-viewport):hover img { transform: none !important; } /* ───────────────────────────────────────────────────────────── FIX 7: iOS Safari — prevent rubber-band scroll on body while mobile nav is open (minor UX hardening) */ body.mobile-nav-active { overflow: hidden; position: fixed; width: 100%; } /* ───────────────────────────────────────────────────────────── FIX 8: Prevent AOS from creating ghost compositing layers on gallery cards. AOS sets transform and opacity inline — these overrides ensure any residual AOS attributes on gallery children are cleared immediately. */ #gallery [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }