/* ════════════════════════════════════════════════════════════════ SCHOONGENOEG — iOS / Safari specifieke CSS fixes sg1s: Alle CSS-workarounds voor iOS Safari 100vh/toolbar/modal bugs sg1byz88: Safari-interactie bugfixes (DevTools audit 22 aug 2026): - transparante overlay-blokkade → pointer-events:none als inactief - -webkit-appearance:none → border/bg fallback voor zichtbaarheid - touch-action conflict planning-board → drag-elementen uitgesloten - body.modal-open restorer (zie sg-ios-fixes.js Fix 7b) ════════════════════════════════════════════════════════════════ 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. sg1byz88 FIX: -webkit-appearance:none maakt inputs onzichtbaar als de parent geen expliciete border/background heeft. Fallback border + background zorgen dat inputs altijd zichtbaar zijn. Bestaande app-styles (specifiekere selectors) overschrijven 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 */ /* sg1byz88: fallback — voorkomt onzichtbare inputs na appearance:none */ /* Alleen als geen expliciete border is gezet door het thema/component */ border: var(--sg-input-border, 1px solid #d1d5db); background-color: var(--sg-input-bg, #ffffff); } /* 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 */ } } /* sg1byz88: donker thema input-fallback */ html.sg-theme-dark { --sg-input-border: 1px solid #374151; --sg-input-bg: #1e293b; } /* ────────────────────────────────────────────────────────────── 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; } } /* ────────────────────────────────────────────────────────────── 8. sg1byz88/sg1byz91 — Inactieve overlays blokkeren geen interactie meer ──────────────────────────────────────────────────────────────── Rootcause: `.modal-overlay { pointer-events: all !important }` in sg-fixes.css r.57 hield overlays actief ook als ze niet zichtbaar waren → transparante "glazen plaat" blokkeert iOS touch-events. sg1byz91 fix: !important is verwijderd uit sg-fixes.css r.57. HOE DE APP WERKT (na grep-analyse van alle *.js bestanden): - Modals worden geopend via: classList.remove('hidden') - Modals worden gesloten via: classList.add('hidden') - DUS: overlay zonder .hidden = OPEN/ACTIEF - DUS: overlay met .hidden = GESLOTEN/INACTIEF - .active/.open/.show worden ook gebruikt in sommige bestanden Strategie: A) GESLOTEN overlays (.hidden aanwezig) → pointer-events: none B) OPEN overlays (.hidden afwezig) → pointer-events: all (hersteld) C) Volledig verborgen via inline-style → display: none forceren D) iOS Safari: !important op gesloten overlays voor garantie ────────────────────────────────────────────────────────────── */ /* ── A. GESLOTEN overlays: pointer-events uitschakelen ─────────── */ /* Nu sg-fixes.css r.57 geen !important meer heeft, winnen deze regels */ .modal-overlay.hidden { pointer-events: none; } /* ── B. OPEN overlays: pointer-events herstellen ──────────────── */ /* Overlays zonder .hidden zijn actief/zichtbaar → interactie toestaan. Specificiteit: .modal-overlay:not(.hidden) > .modal-overlay → wint. */ .modal-overlay:not(.hidden) { pointer-events: all; } /* Extra: ook .active/.open/.show herstellen (sommige modules) */ .modal-overlay.active, .modal-overlay.open, .modal-overlay.show { pointer-events: all; } /* ── C. VOLLEDIG VERBORGEN overlays: display:none forceren ──────── */ /* Voor overlays die via inline-style verborgen worden */ .modal-overlay.hidden, .modal-overlay[style*="display: none"], .modal-overlay[style*="display:none"], [class*="modal-bg"].hidden, [class*="overlay"].hidden { pointer-events: none !important; display: none !important; } /* Opacity/visibility verborgen */ .modal-overlay[style*="opacity: 0"], .modal-overlay[style*="opacity:0"], .modal-overlay[style*="visibility: hidden"], .modal-overlay[style*="visibility:hidden"] { pointer-events: none !important; } /* ── D. iOS Safari extra garantie ─────────────────────────────── */ /* !important voor iOS: gesloten overlays mogen NOOIT touch blokkeren */ @supports (-webkit-touch-callout: none) { /* Gesloten overlays: pointer-events hard uitzetten */ .modal-overlay.hidden, .modal-overlay[style*="display: none"], .modal-overlay[style*="display:none"] { pointer-events: none !important; } /* Open overlays (geen .hidden): pointer-events herstellen met !important zodat ook een eventueel andere !important-regel overwonnen wordt */ .modal-overlay:not(.hidden) { pointer-events: all !important; } /* Modals EN invoerelementen BINNEN open overlays altijd klikbaar */ .modal-overlay:not(.hidden) .modal, .modal-overlay:not(.hidden) input, .modal-overlay:not(.hidden) textarea, .modal-overlay:not(.hidden) select, .modal-overlay:not(.hidden) button { pointer-events: all !important; } } /* ────────────────────────────────────────────────────────────── 9. sg1byz88 — touch-action uitsluiting voor drag-elementen ──────────────────────────────────────────────────────────────── Sectie 5 (CSS) zet touch-action:manipulation op knoppen en inputs. sg1byz90: Fix 5 (JS EventTarget patch) uitgeschakeld — CSS §5 is het enige mechanisme nu, dat is veilig en voldoende. Planning-board, sortable-lijsten en canvas-elementen gebruiken custom drag-and-drop en mogen NIET manipulation hebben. We resetten touch-action op drag-containers naar 'pan-y' (of 'auto') zodat iOS drag-bewegingen correct doorgeeft. ────────────────────────────────────────────────────────────── */ @supports (-webkit-touch-callout: none) { /* Planning-board drag-containers */ .planning-board, .planning-col, .planning-row, .planning-kaart, [data-draggable="true"], [data-sortable], [class*="sortable"], [class*="draggable"], [class*="drag-handle"], .sg-drag, .kanban-col, .kanban-card, /* Canvas-elementen die eigen touch-events hebben */ canvas { touch-action: pan-y !important; /* sta verticaal scrollen toe, geen manipulation-blokkade */ } /* Ploegen-rijen / planning-items zijn ook draggable */ .pd-dag-rij, .pd-ploeg-row, .pd-item, [class*="pd-drag"], [id*="planBord"] [class*="rij"], [id*="planBord"] [class*="kaart"] { touch-action: pan-y !important; } } /* ────────────────────────────────────────────────────────────── 10. notch / Dynamic Island ruimte links/rechts (landscape) ────────────────────────────────────────────────────────────── */ @supports (padding: env(safe-area-inset-left, 0px)) { .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)); } }