Routen-Detailkarte: WebGL-Kontext-Leak gefixt → bleibt GL + zoomt auf Route

Eigentliche Ursache von 'Detailkarte zoomt nicht auf die Route': die Karte war
auf dem Gerät gar keine GL-Karte mehr, sondern der Leaflet+OSM-RASTER-Fallback.
Grund: _detailMap (GL-Kontext) wurde beim Schließen des Modals NIE freigegeben —
jede geöffnete Route leakte einen WebGL-Kontext. Nach ~8 wirft MapLibre, und
UI.map.create fällt auf Leaflet+OSM zurück. Genau die Mapnik-Kacheln aus Renés
Screenshots (und die OSM-Attribution, die wir doch loswerden wollten).

Fixes:
- _detailMap modulweit + im onClose des Detail-Modals freigeben.
- routes.js destroy(): _detailMap/_suggestMap/_searchMap + Mini-Maps beim
  Verlassen der Seite freigeben.
- ui.js: Offscreen-Snapshot-Kontext nach 15s Leerlauf freigeben (hielt dauerhaft
  einen Kontext; Cache bleibt → kein Neu-Rendern).
- _fitRouteMap fittet jetzt aufs 'load'/'idle'-Event der Karte (iOS verwirft ein
  fitBounds VOR dem ersten Render) statt nur auf feste Timeouts.

Verifiziert (headless): 12 Detail-Öffnungen in Folge bleiben ALLE GL
(Leaflet:false), GL-Canvas-Zahl bleibt bei 1–2 statt zu wachsen. Vorher leakte
jede Öffnung einen Kontext.
This commit is contained in:
rene 2026-06-05 15:10:12 +02:00
parent d203ab17a8
commit 720971d252
7 changed files with 71 additions and 30 deletions

View file

@ -86,14 +86,14 @@
<title>Ban Yaro</title>
<!-- Theme + theme-color Statusleiste vor CSS setzen -->
<script src="/js/boot-early.js?v=1204"></script>
<script src="/js/boot-early.js?v=1205"></script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=1204">
<link rel="stylesheet" href="/css/layout.css?v=1204">
<link rel="stylesheet" href="/css/components.css?v=1204">
<link rel="stylesheet" href="/css/utilities.css?v=1204">
<link rel="stylesheet" href="/css/lists.css?v=1204">
<link rel="stylesheet" href="/css/design-system.css?v=1205">
<link rel="stylesheet" href="/css/layout.css?v=1205">
<link rel="stylesheet" href="/css/components.css?v=1205">
<link rel="stylesheet" href="/css/utilities.css?v=1205">
<link rel="stylesheet" href="/css/lists.css?v=1205">
</head>
<body>
@ -617,11 +617,11 @@
<div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=1204"></script>
<script src="/js/ui.js?v=1204"></script>
<script src="/js/app.js?v=1204"></script>
<script src="/js/worlds.js?v=1204"></script>
<script src="/js/offline-indicator.js?v=1204"></script>
<script src="/js/api.js?v=1205"></script>
<script src="/js/ui.js?v=1205"></script>
<script src="/js/app.js?v=1205"></script>
<script src="/js/worlds.js?v=1205"></script>
<script src="/js/offline-indicator.js?v=1205"></script>
<!-- Feature-Seiten werden lazy geladen -->
@ -631,7 +631,7 @@
<!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
<script src="/js/boot.js?v=1204"></script>
<script src="/js/boot.js?v=1205"></script>
</body>