Die Website funktioniert auf Android, aber nicht auf iPhone/Safari – warum und wie Sie es beheben

Das ist eine der frustrierendsten Situationen: Sie öffnen Ihre Website auf Ihrem Android-Handy, und alles ist perfekt. Dann schickt Ihnen ein Kunde einen Screenshot vom iPhone – überlappende Buttons, ein Video, das nicht startet, Text, der aus dem Bildschirm läuft. Sie haben den Eindruck, die Website sei halb kaputt, obwohl Sie selbst kein Problem sehen.

Die gute Nachricht: Fast immer ist es keine schwarze Magie, sondern ein bekannter Unterschied zwischen Browser-Engines. Safari (die WebKit-Engine) interpretiert manche Dinge anders als Chrome. In diesem Artikel erkläre ich Ihnen, warum diese Unterschiede entstehen, welche die häufigsten konkreten Ursachen sind und wie Sie sie erkennen und beheben können – auch wenn Sie kein iPhone zur Hand haben.

Warum der Unterschied entsteht: Safari ist nicht Chrome

Jeder Browser hat eine Engine, die Code in das umwandelt, was Sie auf dem Bildschirm sehen. Chrome, Edge, Brave und die meisten Android-Browser nutzen dieselbe Engine, Blink. Safari – und, Achtung, ALLE Browser auf dem iPhone, einschließlich Chrome für iOS – müssen zwingend Apples eigene Engine, WebKit, verwenden.

Das ist der Kernpunkt, den viele Website-Betreiber übersehen: Auf dem iPhone gibt es kein echtes Chrome. Wenn Sie Chrome auf dem iPhone installieren, läuft darunter trotzdem Safari. Wenn also etwas auf dem iPhone kaputtgeht, ist es ein WebKit-Problem, egal welchen Browser der Besucher scheinbar nutzt.

WebKit ist strenger und übernimmt manche Funktionen später. Code, der auf Android funktioniert, weil Chrome kleine Fehler verzeiht, kann auf Safari scheitern, das strenger auf die Regeln achtet.

Die häufigsten konkreten Ursachen

Aus unserer Erfahrung lassen sich fast alle „nur-auf-iPhone"-Probleme auf ein paar wiederkehrende Übeltäter zurückführen:

• Bildschirmhöhe (100vh): Auf dem iPhone blendet sich die Safari-Leiste ein und aus, sodass 100vh größer ist als der tatsächliche Bildschirm – „Vollbild"-Abschnitte ragen aus dem Rahmen. Die moderne Lösung ist die Einheit dvh.

• Datum mit Bindestrichen („2026-07-11"): Safari weigert sich, im Code mit Bindestrichen geschriebene Daten zu lesen, während Chrome sie akzeptiert. Ergebnis: leere Kalender oder Countdowns nur auf dem iPhone.

• Video, das nicht automatisch startet: Safari verlangt, dass Hintergrundvideos stumm geschaltet sind und das Attribut playsinline haben, sonst bleibt der Bildschirm schwarz.

• Glaseffekte (backdrop-filter) und manche Animationen, die auf Android korrekt erscheinen und auf Safari fehlen.

• Eingabefelder, die beim Tippen abrupt zoomen, wenn der Text zu klein ist.

Wie Sie diagnostizieren, auch ohne iPhone

Sie brauchen nicht unbedingt ein iPhone, um das Problem zu erkennen, obwohl ein Test auf einem echten Gerät am sichersten bleibt.

• Fragen Sie genau nach: Bitten Sie den Kunden um das iPhone-Modell und die iOS-Version, plus einen Screenshot oder ein kurzes Video. „Funktioniert nicht" sagt nichts; „der Button unter dem Formular ist auf dem iPhone 12 abgeschnitten" sagt alles.

• Reproduzieren Sie es auf jedem Mac: Safari auf jedem Mac nutzt ebenfalls WebKit, daher treten viele Bugs dort identisch auf.

• Nutzen Sie den Entwicklermodus in Safari (Web Inspector), der Ihnen genau zeigt, welche Regel scheitert.

• Testen Sie isoliert: Deaktivieren Sie nacheinander Animationen, Video, Glaseffekte. Wenn das Problem verschwindet, haben Sie den Übeltäter gefunden.

Goldene Regel: Zuerst reproduzieren Sie das Problem, dann beheben Sie es. „Rate"-Reparaturen zerstören meist etwas anderes.

Wie Sie das Problem von Anfang an vermeiden

Der günstigste Safari-Bug ist der, den Sie nie schreiben. Ein paar Prinzipien, die uns Überraschungen ersparen:

• Wir testen VOR dem Launch auf einem echten iPhone, nicht erst, wenn Kunden sich beschweren.

• Wir bevorzugen einfache, bewährte Lösungen gegenüber den neuesten „angesagten" Tricks, die nur in Chrome funktionieren.

• Wir verwenden von Anfang an die richtigen Einheiten und Attribute (dvh, playsinline, muted).

• Wir vermeiden aufwendige Animationen, die sich zwischen Engines unvorhersehbar verhalten.

Deshalb bauen wir bei MPO Web Studio zuerst eine kostenlose Demo Ihrer Website und testen sie auf iPhone und Android, bevor wir über Geld sprechen. Sie sehen das echte Ergebnis auf Ihrem eigenen Telefon, kein Versprechen. Wir arbeiten vollständig remote, im ganzen Land, mit transparenten Preisen.