/* ════════════════════════════════════════════════════════════════ SCHOONGENOEG — CSS filter WebKit/Safari isolatie fix sg1u: Voorkomt dat filter: op child-elementen de parent-container onzichtbaar of wit maakt in Safari (WebKit stacking-context bug) ── Hoe Safari's filter-bug werkt ────────────────────────────── In WebKit (Safari) maakt elk element met een actieve CSS filter- property een nieuw stacking context aan. Een bijwerking hiervan is dat de background/opacity van de PARENT container in sommige versies wrong-composited wordt: - De container lijkt transparant of wit terwijl hij dat niet is - Dit treedt op bij: filter: invert(), blur(), brightness() op een ::-webkit-calendar-picker-indicator pseudo-element - Safari 12–14 heeft dit het meest; Safari 15+ is verbeterd maar nog steeds kwetsbaar onder bepaalde compositing-combinaties ── Wat deze fix doet ─────────────────────────────────────────── 1. Voegt -webkit-filter en filter: none toe op de containers die ZELF geen filter nodig hebben (topbar, main-content, body, etc) 2. Isoleert de stacking context van elk element MET filter zodat de bubble niet escapet naar de parent 3. Voegt will-change: transform toe als trigger voor een nieuwe GPU composite layer — dit isoleert de filter-effect in Safari 4. Beschermt de login container (altijd zichtbaar, nooit filter) ── Geraakte selectors in SchoonGenoeg ───────────────────────── • input[type=date]::-webkit-calendar-picker-indicator (style.css, sg-dark-fixes.css, sg-theme-engine.css, sg-fixes.css) • .bottom-nav-btn i (filter: brightness + drop-shadow) • .sg-module-icon (filter: brightness + drop-shadow) • backdrop-filter: blur op .modal, .plan-act-blue, gps-tracker ════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── 1. KRITIEKE CONTAINERS — nooit een filter effect Deze elementen mogen NOOIT via filter verdwijnen of wit worden. -webkit-filter: none !important is de WebKit-specifieke reset. ──────────────────────────────────────────────────────────────── */ body, html, #topbar, .topbar, .main-content, #mainContent, .app-container, #appContainer, #loginScreen, .login-screen, .login-card, #loginCard, .login-container, #loginContainer, #loginWrapper, .sidebar, #sidebar, #bottomNav, .bottom-nav { -webkit-filter: none !important; filter: none !important; } /* ────────────────────────────────────────────────────────────── 2. STACKING CONTEXT ISOLATIE Elementen MET een toegestane filter krijgen transform: translateZ(0) zodat hun filter-effect in een eigen GPU-layer blijft en niet escapet naar ouder-containers (Safari WebKit compositing bug). ──────────────────────────────────────────────────────────────── */ /* Kalender/klok icoontjes in donker thema — filter toegestaan maar geïsoleerd */ html.sg-theme-dark input[type="date"]::-webkit-calendar-picker-indicator, html.sg-theme-dark input[type="time"]::-webkit-calendar-picker-indicator, html.sg-theme-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator { /* Safari bug: isoleer in eigen compositing layer */ -webkit-transform: translateZ(0); transform: translateZ(0); /* Expliciet: geen filter-escape naar de parent input of form */ isolation: isolate; } /* ────────────────────────────────────────────────────────────── 3. INPUT CONTAINERS — extra bescherming tegen filter-bubble De parent input-wrapper mag nooit het kalender-icon filter erven. ──────────────────────────────────────────────────────────────── */ input[type="date"], input[type="time"], input[type="datetime-local"] { -webkit-filter: none !important; filter: none !important; /* Nieuwe stacking context zodat pseudo-element filter niet escapet */ isolation: isolate; /* GPU-layer voor Safari compositing */ -webkit-transform: translateZ(0); transform: translateZ(0); } /* ────────────────────────────────────────────────────────────── 4. TOPBAR LOGO — filter: none verzekerd logo_sg.png mag nooit per ongeluk wit/transparant worden door een filter op een nabijgelegen element (bijv. nav-button glow). ──────────────────────────────────────────────────────────────── */ #topbarLogo, #topbarLogoImg, .topbar-logo, .topbar-logo img, .brand-logo, .nav-logo { -webkit-filter: none !important; filter: none !important; /* Eigen compositing layer — filter van siblings trekt niet door */ -webkit-transform: translateZ(0); transform: translateZ(0); isolation: isolate; } /* ────────────────────────────────────────────────────────────── 5. BOTTOMNAV KNOPPEN — drop-shadow filter geïsoleerd bottom-nav-btn gebruikt filter: drop-shadow(). In Safari kan dit de complete nav-container laten verdwijnen als de GPU-layer niet correct wordt aangemaakt. ──────────────────────────────────────────────────────────────── */ .bottom-nav-btn { /* Isoleer van de bottom-nav container */ isolation: isolate; -webkit-transform: translateZ(0); transform: translateZ(0); } /* De .bottom-nav container zelf: nooit filter */ .bottom-nav, #bottomNav { -webkit-filter: none !important; filter: none !important; /* Expliciete opaciteit om Safari opacity-reset te voorkomen */ opacity: 1 !important; } /* ────────────────────────────────────────────────────────────── 6. BACKDROP-FILTER ISOLATIE backdrop-filter: blur() op modals en panels kan in Safari de container eronder wit maken (known bug, webkit.org #218921). Fix: will-change: transform op de modal-container zelf. ──────────────────────────────────────────────────────────────── */ .modal, .modal-overlay, .overlay, .plan-act-blue, [class*="modal-wrap"], [class*="modal-bg"] { /* Creëer expliciete compositing layer vóór backdrop-filter */ -webkit-transform: translateZ(0); transform: translateZ(0); /* Safari-specifiek: isolate voorkomt dat backdrop-filter kleurt via de container naar buiten bloedt */ isolation: isolate; } /* ────────────────────────────────────────────────────────────── 7. SAFARI SPECIFIEK — @supports filter fallback Op browsers die -webkit-filter kennen maar waar filter problemen geven op de root: zet expliciete opacity reset. ──────────────────────────────────────────────────────────────── */ @supports (-webkit-filter: none) { /* Voorkom dat de root ooit transparant/wit wordt door een willekeurig filter ergens in de DOM-boom */ html { -webkit-filter: none !important; filter: none !important; opacity: 1 !important; } body { -webkit-filter: none !important; filter: none !important; opacity: 1 !important; /* Safari: will-change: opacity geeft body een eigen GPU-layer zodat kinderen niet de body-compositing kunnen verstoren */ will-change: opacity; } } /* ────────────────────────────────────────────────────────────── 8. LICHTMODUS — kalender-icoon geen invert nodig, maar wel isoleer ──────────────────────────────────────────────────────────────── */ html.sg-theme-light input[type="date"]::-webkit-calendar-picker-indicator, html.sg-theme-light input[type="time"]::-webkit-calendar-picker-indicator, html.sg-theme-light input[type="datetime-local"]::-webkit-calendar-picker-indicator, html:not(.sg-theme-dark) input[type="date"]::-webkit-calendar-picker-indicator, html:not(.sg-theme-dark) input[type="time"]::-webkit-calendar-picker-indicator { -webkit-filter: none !important; filter: none !important; -webkit-transform: translateZ(0); transform: translateZ(0); isolation: isolate; opacity: 0.65; } /* ────────────────────────────────────────────────────────────── 9. LOGINSCHERM NOODREM Als ondanks alles de login container wit/onzichtbaar is: forceer zichtbaarheid. Dit is de laatste verdedigingslinie. ──────────────────────────────────────────────────────────────── */ #loginScreen, #loginScreen *, .login-modal, .login-modal * { -webkit-filter: none !important; filter: none !important; /* Visibility als backup — zorgt dat een filter: opacity(0) bug nooit de login verbergt */ visibility: visible !important; } /* Maar herstel voor de login-knop laad-spinner (die mag draaien) */ #loginBtn .fa-spinner { visibility: visible !important; -webkit-filter: none !important; filter: none !important; }