Wie behebt man Darstellungsprobleme der Foundation-Komponente "Reveal" (Modal) auf mobilen Endgeräten?

Melden

Darstellungsprobleme mit der Foundation-Komponente "Reveal" (Modal) auf mobilen Endgeräten (besonders auf iOS/Safari) sind ein bekanntes Thema. Meistens betreffen sie die Scroll-Fähigkeit, die Positionierung bei eingeblendeter Tastatur oder die Höhe des Modals.

Hier sind die gängigsten Lösungen, um diese Probleme zu beheben:

1. Ganzseitige Modals auf Mobile (Full-Screen)

Auf kleinen Bildschirmen ist es oft besser, das Modal über den gesamten Bildschirm anzuzeigen, anstatt einen kleinen Kasten mit Rändern zu haben.

Lösung: Nutze die integrierte Klasse .full oder steuere es über Media Queries.

<div class="reveal full" id="exampleModal" data-reveal>
  <!-- Inhalt -->
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Oder per CSS für spezifische Breakpoints:

@media screen and (max-width: 39.9375em) {
  .reveal {
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh;
  }
}

2. Problem: Hintergrund scrollt mit ("Body Scroll Lock")

Ein häufiges Problem ist, dass der Benutzer den Hintergrund bewegt, während das Modal offen ist. Foundation setzt zwar .is-reveal-open auf den Body, aber manchmal greift das nicht korrekt.

Lösung: Erzwinge das Fixieren des Hintergrunds im CSS:

body.is-reveal-open {
  overflow: hidden;
  position: fixed; /* Verhindert Scrollen auf iOS komplett */
  width: 100%;
}

3. Problem: Modal-Inhalt ist abgeschnitten (Scrolling im Modal)

Wenn der Inhalt des Modals länger ist als der Handy-Bildschirm, kann man oft nicht bis zum Ende scrollen.

Lösung: Stelle sicher, dass das Modal selbst scrollbar ist:

.reveal {
  max-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Erlaubt flüssiges Scrollen auf iOS */
}

4. Probleme mit der virtuellen Tastatur (iOS)

Wenn sich im Modal ein Eingabefeld befindet, schiebt die iOS-Tastatur das Modal oft unschön nach oben oder verdeckt das Eingabefeld.

Lösung: Foundation versucht das Modal vertikal zu zentrieren. Auf Mobile ist es oft sicherer, das Modal oben zu fixieren:

// Initialisierung mit Optionen
$(document).foundation();

// Falls das Problem weiterhin besteht, vertikale Zentrierung auf Mobile deaktivieren
$('#exampleModal').on('open.zf.reveal', function() {
  if (Foundation.MediaQuery.atLeast('medium')) {
    // Standard-Verhalten für Desktop
  } else {
    // Für Mobile: Position manuell anpassen
    $(this).css('top', '10px');
  }
});

5. Z-Index Probleme mit dem Overlay

Manchmal liegt das dunkle Overlay (.reveal-overlay) über dem Modal-Inhalt, sodass man nichts mehr anklicken kann.

Lösung: Überprüfe die Z-Index-Reihenfolge in deinem CSS. Standardmäßig sollte es so aussehen:

.reveal-overlay {
  z-index: 1005;
}
.reveal {
  z-index: 1006;
}

6. Viewport-Height (vh) Bug auf Mobile

100vh wird auf mobilen Browsern oft falsch berechnet (wegen der Adressleiste).

Lösung: Verwende statt height: 100vh lieber:

.reveal.full {
  height: 100%; /* Nutzt den verfügbaren Platz im Container */
  min-height: -webkit-fill-available;
}

Checkliste bei hartnäckigen Problemen:

  1. Meta-Tag: Ist der Viewport-Tag im <head> korrekt gesetzt? <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. Container: Befindet sich das Modal direkt unter dem <body>-Tag? (Verschachtelte Container mit position: relative oder overflow: hidden können Reveal stören).
  3. Foundation-Version: Nutzt du die aktuellste Version? Besonders Versionen vor 6.4 hatten einige Bugs im Mobile-Scrolling.

Empfehlung: Für die beste User Experience auf Mobile solltest du das Modal mit der Option data-v-offset="0" und data-h-offset="0" (oder der Klasse .full) konfigurieren, damit es keine "Lücken" zum Rand gibt, in denen der User aus Versehen den Hintergrund berühren könnte.