Mon site marche sur Android mais pas sur iPhone/Safari — pourquoi et comment le réparer ?

C'est l'une des situations les plus frustrantes : vous ouvrez votre site sur votre téléphone Android et tout est parfait. Puis un client vous envoie une capture d'écran prise sur iPhone — boutons superposés, une vidéo qui ne démarre pas, du texte qui déborde de l'écran. On dirait que votre site est à moitié cassé, alors que vous ne voyez aucun problème.

Bonne nouvelle : ce n'est presque jamais de la magie noire. C'est une différence bien connue entre les moteurs de navigateur. Safari (le moteur WebKit) interprète certaines choses différemment de Chrome. Dans cet article, je vous explique pourquoi ces différences apparaissent, quelles sont les causes concrètes les plus fréquentes, et comment les identifier et les réparer — même sans iPhone sous la main.

Pourquoi la différence existe : Safari n'est pas Chrome

Chaque navigateur a un moteur qui transforme le code en ce que vous voyez à l'écran. Chrome, Edge, Brave et la plupart des navigateurs sur Android partagent le même moteur, Blink. Safari — et, attention, TOUS les navigateurs sur iPhone, y compris Chrome pour iOS — sont obligés d'utiliser le moteur d'Apple, WebKit.

C'est la clé que beaucoup de propriétaires ignorent : il n'existe pas de vrai Chrome sur iPhone. Si vous installez Chrome sur un iPhone, en dessous c'est toujours Safari. Donc si quelque chose casse sur iPhone, c'est un problème WebKit, quel que soit le navigateur que votre visiteur semble utiliser.

WebKit est plus strict et adopte certaines fonctions plus tard. Du code qui marche sur Android parce que Chrome pardonne les petites erreurs peut échouer sur Safari, plus rigoureux sur les règles.

Les causes concrètes les plus fréquentes

D'après notre expérience, presque tous les problèmes « uniquement sur iPhone » se réduisent à quelques coupables récurrents :

• La hauteur d'écran (100vh) : sur iPhone la barre de Safari se cache et réapparaît, donc 100vh est plus grand que l'écran réel — les sections « plein écran » débordent du cadre. La solution moderne est l'unité dvh.

• Les dates avec tirets (« 2026-07-11 ») : Safari refuse de lire les dates avec tirets dans le code, que Chrome accepte. Résultat : des calendriers ou comptes à rebours vides uniquement sur iPhone.

• La vidéo qui ne démarre pas : Safari exige que la vidéo de fond soit muted et porte l'attribut playsinline, sinon elle reste noire.

• Les effets de verre (backdrop-filter) et certaines animations, corrects sur Android mais absents sur Safari.

• Les champs qui zooment brusquement à la saisie quand le texte est trop petit.

Comment diagnostiquer sans posséder d'iPhone

Vous n'avez pas absolument besoin d'un iPhone pour attraper le problème, même si un test sur un vrai appareil reste le plus sûr.

• Demandez précisément : le modèle d'iPhone et la version d'iOS du client, plus une capture ou un court clip. « Ça ne marche pas » ne dit rien ; « le bouton sous le formulaire est coupé sur iPhone 12 » dit tout.

• Reproduisez sur n'importe quel Mac : Safari sur Mac utilise aussi WebKit, donc beaucoup de bugs apparaissent à l'identique.

• Utilisez le mode développeur de Safari (Web Inspector), qui montre exactement quelle règle échoue.

• Testez de façon isolée : désactivez une à une les animations, la vidéo, les effets de verre. Quand le problème disparaît, vous tenez le coupable.

La règle d'or : reproduisez d'abord le problème, réparez ensuite. Les corrections « au hasard » cassent en général autre chose.

Comment l'éviter dès le départ

Le bug Safari le moins cher est celui que vous n'écrivez jamais. Quelques principes qui nous épargnent des surprises :

• Nous testons sur un vrai iPhone AVANT le lancement, pas après les plaintes des clients.

• Nous préférons des solutions simples et éprouvées aux dernières astuces « à la mode » qui ne marchent que sur Chrome.

• Nous utilisons les bonnes unités et attributs (dvh, playsinline, muted) dès le début.

• Nous évitons les animations lourdes au comportement imprévisible entre moteurs.

C'est pourquoi, chez MPO Web Studio, nous construisons d'abord une démo gratuite de votre site et la testons sur iPhone et Android avant de parler d'argent. Vous voyez le vrai résultat, sur votre propre téléphone, pas une promesse. Nous travaillons entièrement à distance, partout dans le pays, avec des prix transparents.