/** * safari-fixes.css * * Safari / WebKit targeted CSS patches. * This file is loaded alongside the main style.css and mobile.css. * * All rules here are either: * a) scoped to @supports blocks that only match WebKit, or * b) harmless on other browsers (no-op overrides). * * The primary Safari bug — foreignObject not inheriting SVG transforms — * is fixed in JS (CanvasSvgContent.jsx + safari-detect.js) because it cannot * be solved with CSS alone. The rules below handle secondary rendering * artefacts that appear alongside the main fix. */ /* ── 1. Force GPU compositing for the canvas SVG on Safari ───────────────── translateZ(0) promotes the SVG to its own compositing layer, preventing a 1-frame repaint lag for foreignObject tiles when rapidly panning/zooming. ⚠️ THIS RULE HAS BEEN INTENTIONALLY REMOVED FROM CSS. Applying `transform: translateZ(0)` via CSS on the element cannot be reliably scoped to Safari with @supports — Chrome also recognises WebKit-only properties as syntactically valid, so any @supports guard matches Chrome too. In Chrome a CSS transform on breaks → inheritance: items render at SVG (0,0) instead of their correct world positions. The selection ring (native SVG) is unaffected → blue ring at correct spot, item content stuck at top-left. FIX: translateZ(0) is now applied inline on in Canvas.jsx, gated on IS_SAFARI — the same flag that controls the JS foreignObject rendering path. The two are always in sync. See Canvas.jsx svg style prop. */ /* ── 2. Prevent WebKit from stripping pointer-events on SVG children ─────── In certain Safari versions, nested elements inside a transformed SVG can lose their pointer-events if the parent has overflow:hidden and the child visually escapes the clip region. This restores expected behaviour without affecting other browsers. */ .canvas-area svg g { pointer-events: inherit; } /* ── 3. Fix tap-highlight bleed on iOS for canvas controls ───────────────── iOS Safari can show a blue tap highlight on SVG elements that are not properly covered by -webkit-tap-highlight-color: transparent on ancestor elements. */ .canvas-area svg * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* ── 4. iOS simulated fullscreen (dhs-ios-fullscreen class) ───────────────── iOS Safari does not support the Fullscreen API. When toggleFullscreen() detects iOS, it adds this class to instead of calling requestFullscreen(). The class hides browser chrome via fixed-position layers and stretches the app canvas to the full viewport. On non-iOS browsers this class is never added, so these rules are no-ops. */ html.dhs-ios-fullscreen { /* Prevent rubber-band scrolling from exposing white gaps */ overflow: hidden; position: fixed; width: 100%; height: 100%; } html.dhs-ios-fullscreen body { overflow: hidden; height: 100%; height: -webkit-fill-available; } /* Push the app root to fill the full screen including safe areas */ html.dhs-ios-fullscreen #root, html.dhs-ios-fullscreen .app-root { position: fixed; inset: 0; width: 100%; height: 100%; height: -webkit-fill-available; overflow: hidden; } /* Hide the mobile nav bar in simulated fullscreen so the canvas gets max space */ html.dhs-ios-fullscreen .mobile-nav, html.dhs-ios-fullscreen .app-header, html.dhs-ios-fullscreen nav[class*="mobile"] { display: none !important; }