My site works on Android but breaks on iPhone/Safari — why, and how do I fix it?

It's one of the most frustrating situations: you open your site on your Android phone and everything looks perfect. Then a client sends you a screenshot from an iPhone — overlapping buttons, a video that won't play, text spilling off the screen. It feels like your site is half-broken, even though you can't see a single problem.

Good news: it's almost never black magic. It's a well-known difference between browser engines. Safari (the WebKit engine) interprets some things differently from Chrome. In this article I'll explain why these differences happen, what the most common concrete causes are, and how to identify and fix them — even if you don't have an iPhone handy.

Why the difference exists: Safari isn't Chrome

Every browser has an engine that turns code into what you see on screen. Chrome, Edge, Brave and most browsers on Android all share the same engine, Blink. Safari — and, importantly, EVERY browser on iPhone, including Chrome for iOS — is forced to use Apple's engine, WebKit.

That's the key most owners miss: there is no real Chrome on iPhone. If you install Chrome on an iPhone, underneath it's still Safari. So if something breaks on iPhone, it's a WebKit issue, no matter which browser your visitor appears to be using.

WebKit is stricter and adopts some features later. Code that works on Android because Chrome forgives small mistakes can fail on Safari, which is more rigorous about the rules.

The most common concrete causes

In our experience, almost every "only on iPhone" problem comes down to a few repeat offenders:

• Screen height (100vh): on iPhone the Safari bar hides and reappears, so 100vh is taller than the real screen — full-screen sections spill out of the frame. The modern fix is the dvh unit.

• Dates written with hyphens ("2026-07-11"): Safari refuses to read hyphenated dates in code that Chrome accepts. Result: empty calendars or countdowns only on iPhone.

• Video that won't autoplay: Safari requires background video to be muted and to carry the playsinline attribute, otherwise it stays black.

• Glass effects (backdrop-filter) and some animations that look right on Android but vanish on Safari.

• Inputs that zoom abruptly as you type when the text is too small.

How to diagnose without owning an iPhone

You don't strictly need an iPhone to catch the problem, though testing on a real device is still the safest option.

• Ask precisely: request the client's iPhone model and iOS version, plus a screenshot or short clip. "It doesn't work" says nothing; "the button under the form is cut off on iPhone 12" says everything.

• Reproduce on any Mac: Safari on any Mac also uses WebKit, so many bugs appear identically there.

• Use Safari's developer mode (Web Inspector), which shows exactly which rule is failing.

• Test in isolation: disable animations, video and glass effects one at a time. When the problem disappears, you've found the culprit.

The golden rule: reproduce the problem first, then fix it. Guesswork fixes usually break something else.

How to prevent it from the start

The cheapest Safari bug is the one you never write. A few principles that spare us surprises:

• We test on a real iPhone BEFORE launch, not after clients complain.

• We prefer simple, proven solutions over the latest "trendy" tricks that only work on Chrome.

• We use the correct units and attributes (dvh, playsinline, muted) from the start.

• We avoid heavy animations that behave unpredictably across engines.

That's why, at MPO Web Studio, we first build a free demo of your site and test it on iPhone and Android before we ever talk money. You see the real result, on your own phone, not a promise. We work fully remote, nationwide, with transparent pricing.