/* ════════════════════════════════════════════════════════════════ SCHOONGENOEG — iOS / Safari specifieke CSS fixes sg1s: Alle CSS-workarounds voor iOS Safari 100vh/toolbar/modal bugs ════════════════════════════════════════════════════════════════ Strategie: - Gebruik CSS-var --real-vh (gezet door sg-ios-fixes.js via visualViewport) - Fallback naar dvh / -webkit-fill-available voor browsers zonder JS - Alles in @supports of .sg-is-ios class zodat desktop niet wordt geraakt ════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── 1. --real-vh fallback initialisatie (js/sg-ios-fixes.js schrijft de echte waarde — dit is enkel de CSS-kant zodat er direct iets is vóór JS loopt) ────────────────────────────────────────────────────────────── */ :root { --real-vh: 1vh; /* wordt overschreven door sg-ios-fixes.js */ --sg-vh: 1vh; } /* ────────────────────────────────────────────────────────────── 2. 100vh vervangen door calc(var(--real-vh) * 100) Alleen op iOS (gedetecteerd door .sg-is-ios class op of via @supports -webkit-fill-available) We gebruiken @supports zodat niet-iOS browsers dit overslaan. ────────────────────────────────────────────────────────────── */ @supports (-webkit-touch-callout: none) { /* iOS Safari: vervang 100vh overal waar het springt */ /* Chat container */ .chat-container { height: calc(var(--real-vh, 1vh) * 100 - 280px) !important; } /* Modals: max-height zodat ze niet achter toolbar vallen */ .modal, .modal.large, .modal.xlarge { max-height: calc(var(--real-vh, 1vh) * 100 - 80px) !important; } /* Modal overlay zelf: exacte viewport hoogte */ .modal-overlay, .overlay, [class*="modal-wrap"], [class*="modal-bg"], [id*="Modal"][style*="position:fixed"], [id*="modal"][style*="position:fixed"] { height: calc(var(--real-vh, 1vh) * 100) !important; min-height: calc(var(--real-vh, 1vh) * 100) !important; } /* Dropdown/sheet panels die tot onderkant gaan */ .sheet-wrap, .bottom-sheet, [class*="sheet"][style*="position:fixed"] { max-height: calc(var(--real-vh, 1vh) * 94) !important; } /* max-height berekeningen die --bottom-h gebruiken */ .sg-panel, [class*="-list"][style*="max-height"], [class*="-content"][style*="max-height"] { max-height: calc( var(--real-vh, 1vh) * 100 - var(--topbar-h, 56px) - var(--bottom-h-total, 42px) ) !important; } } /* ────────────────────────────────────────────────────────────── 3. iOS Rubber-band / bounce scroll voorkomen op fixed elementen (Safari bounced op position:fixed containers die niet scrollen) ────────────────────────────────────────────────────────────── */ @supports (-webkit-touch-callout: none) { .main-content { /* Voorkomt momentum-bounce bij einde scroll op iOS */ overscroll-behavior-y: contain; /* Verbetert scroll-performance op iOS */ -webkit-overflow-scrolling: touch; } /* Voorkom dat modal-overlay mee-bounced als achtergrond */ body.modal-open { overflow: hidden; position: fixed; width: 100%; /* Bewaar scroll-positie (body wordt fixed, anders spring naar top) */ /* Wordt gezet via JS: document.body.style.top = -scrollY + 'px' */ } } /* ────────────────────────────────────────────────────────────── 4. Input styling iOS Safari iOS voegt standaard rounded corners en schaduwen toe aan inputs. -webkit-appearance: none verwijdert dit. ────────────────────────────────────────────────────────────── */ @supports (-webkit-touch-callout: none) { input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], textarea, select { -webkit-appearance: none; border-radius: inherit; /* respect parent border-radius */ } /* iOS zoomt in op focus als font-size < 16px — forceer 16px minimum */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], textarea, select { font-size: max(16px, 1em) !important; /* voorkomt auto-zoom op iOS */ } } /* ────────────────────────────────────────────────────────────── 5. iOS tap delay / highlight verwijderen ────────────────────────────────────────────────────────────── */ @supports (-webkit-touch-callout: none) { /* sg1s: tap-highlight verwijderen — op ALLE elementen */ * { -webkit-tap-highlight-color: transparent; } /* sg1s: touch-action manipulation (verwijdert 300ms tap delay) ALLEEN op interactieve elementen — niet op * want dat breekt drag-and-drop in planning-board en canvas */ button, a, label, input, select, textarea, [role="button"], [role="tab"], [role="menuitem"], .bottom-nav-btn, .pz-tab, .pz-actie-btn, .pz-uitnodig-kaart, .pz-stat-card, .pz-kaart { touch-action: manipulation; } /* Knoppen: geen blauwe highlight bij tikken */ button, a, [role="button"] { -webkit-tap-highlight-color: transparent; outline: none; } } /* ────────────────────────────────────────────────────────────── 6. PWA (Add to Home Screen) specifieke fixes Alleen actief als de app in standalone-modus draait ────────────────────────────────────────────────────────────── */ @media (display-mode: standalone) { /* Statusbalk ruimte al verwerkt via env(safe-area-inset-top) in topbar Extra: voorkom wit flikkeren bij orientation change */ html, body { background-color: #0f172a; /* topbar kleur = zelfde als --tb-bg */ } /* De gestures-bar (home indicator area) heeft kleur */ #bottomNav { /* Extra visuele diepte voor de safe-area onder de knoppen */ background: #ffffff !important; } html.sg-theme-dark #bottomNav { background: #111827 !important; } } /* ────────────────────────────────────────────────────────────── 7. notch / Dynamic Island ruimte links/rechts (landscape) ────────────────────────────────────────────────────────────── */ @supports (padding: env(safe-area-inset-left)) { .main-content { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } #topBar, .topbar { padding-left: max(10px, env(safe-area-inset-left, 10px)); padding-right: max(10px, env(safe-area-inset-right, 10px)); } }