Fix: Offline-Pfote per JS-Klasse sichtbar (Fallback zum CSS-Sibling), SW by-v1081

Der reine CSS-Sibling-Selektor klappte nicht zuverlässig (vermutlich
SW-Cache-Mismatch oder DOM-Reihenfolge im aktuellen Zustand des
Users). Lösung: MutationObserver in offline-indicator.js beobachtet
class/style auf #worlds-overlay und togglet .visible auf
#offline-indicator. CSS akzeptiert jetzt beide Wege:

  #worlds-overlay.worlds-visible ~ #offline-indicator,
  #offline-indicator.visible { display: flex; }

So bleibt das Layout funktional auch wenn CSS-Compositing oder
Cache-Versatz mal nicht greift. console.warn wenn das Element nicht
im DOM ist (z.B. wenn alte index.html aus SW-Cache).
This commit is contained in:
rene 2026-05-26 14:36:27 +02:00
parent 521b7b6bee
commit eb0f460304
6 changed files with 33 additions and 14 deletions

View file

@ -101,9 +101,9 @@
</script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=1080">
<link rel="stylesheet" href="/css/layout.css?v=1080">
<link rel="stylesheet" href="/css/components.css?v=1080">
<link rel="stylesheet" href="/css/design-system.css?v=1081">
<link rel="stylesheet" href="/css/layout.css?v=1081">
<link rel="stylesheet" href="/css/components.css?v=1081">
</head>
<body>
@ -630,11 +630,11 @@
<div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=1080"></script>
<script src="/js/ui.js?v=1080"></script>
<script src="/js/app.js?v=1080"></script>
<script src="/js/worlds.js?v=1080"></script>
<script src="/js/offline-indicator.js?v=1080"></script>
<script src="/js/api.js?v=1081"></script>
<script src="/js/ui.js?v=1081"></script>
<script src="/js/app.js?v=1081"></script>
<script src="/js/worlds.js?v=1081"></script>
<script src="/js/offline-indicator.js?v=1081"></script>
<!-- Feature-Seiten werden lazy geladen -->