Résoudre les problèmes d'affichage PrestaShop sur iPhone et iOS

Safari sur iOS possède un moteur de rendu (WebKit) avec des comportements spécifiques qui provoquent régulièrement des anomalies d'affichage sur les boutiques PrestaShop. Menu déroulant inaccessible, zoom intempestif, éléments qui débordent de l'écran… Ces problèmes sont souvent invisibles sur Android ou en simulation desktop, ce qui les rend particulièrement frustrants à diagnostiquer.

Après plus de dix ans d'intégration PrestaShop, voici les problèmes iOS les plus fréquents et leurs solutions éprouvées.

Diagnostic préalable : tester correctement sur iPhone

Avant toute correction, il est essentiel de reproduire le problème dans des conditions fiables.

Les outils de test recommandés

• **Safari > Développement > Simulateur iOS** (macOS uniquement) : le plus fiable, utilise le vrai moteur WebKit
• **Chrome DevTools** en mode responsive : utile pour le dimensionnement, mais ne reproduit pas les bugs spécifiques à Safari/WebKit
• **BrowserStack ou LambdaTest** : test sur de vrais appareils à distance, indispensable pour les bugs critiques

Attention : Les simulateurs en ligne de type « iPhone simulator » ne reproduisent pas les comportements réels de Safari. Ils utilisent le moteur de votre navigateur desktop avec une simple contrainte de viewport. Ne vous y fiez pas pour du debug iOS.

Activer le debug distant Safari

Pour inspecter directement votre boutique depuis un iPhone physique :

1. Sur l'iPhone : **Réglages > Safari > Avancé > Inspecteur Web** → Activer
2. Connectez l'iPhone au Mac via USB
3. Dans Safari desktop : **Développement > [Nom de l'iPhone] > [URL de la page]**

Cette méthode vous donne accès à la console JavaScript et à l'inspecteur CSS directement sur l'appareil.

Problème n°1 : le menu déroulant ne fonctionne pas sur iPhone

C'est le bug le plus fréquemment signalé. Le menu de navigation se déploie au survol (:hover) sur desktop, mais sur un écran tactile, il n'y a pas de survol — uniquement des taps.

Cause technique

Les thèmes PrestaShop classiques (notamment ceux basés sur le thème par défaut 1.6) utilisent des événements :hover en CSS ou mouseenter en JavaScript pour afficher les sous-menus. Sur iOS, le premier tap déclenche le :hover, mais le second tap suit le lien — ce qui empêche de naviguer dans les sous-catégories.

Solution CSS : le menu accessible au tap

Pour PrestaShop 1.6 et ses thèmes dérivés, remplacez la logique hover par une approche compatible tactile :

/* Désactiver le hover sur les écrans tactiles */
@media (hover: none) and (pointer: coarse) {
  #block_top_menu ul.menu-content {
    display: none;
  }

  #block_top_menu li.sfHoverForce > ul.menu-content {
    display: block;
  }
}

Solution JavaScript : toggle au tap

Pour un contrôle plus fin, utilisez un script qui bascule l'affichage au tap :

document.addEventListener('DOMContentLoaded', function () {
  if ('ontouchstart' in window) {
    document.querySelectorAll('#_desktop_top_menu .category').forEach(function (item) {
      var link = item.querySelector('a[data-depth="0"]');
      var submenu = item.querySelector('.popover');

      if (link && submenu) {
        link.addEventListener('click', function (e) {
          var isOpen = submenu.classList.contains('shown');

          // Fermer tous les autres sous-menus
          document.querySelectorAll('#_desktop_top_menu .popover.shown').forEach(function (el) {
            el.classList.remove('shown');
          });

          if (!isOpen) {
            e.preventDefault();
            submenu.classList.add('shown');
          }
        });
      }
    });
  }
});

Sur PrestaShop 8.x avec le thème Classic

Le thème Classic de PrestaShop 8.x gère mieux la navigation mobile grâce au menu hamburger. Cependant, si vous utilisez un thème tiers ou une personnalisation du menu, vérifiez que le composant utilise bien la media query @media (hover: none) plutôt que des breakpoints fixes.

Problème n°2 : zoom automatique sur les champs de formulaire

iOS zoome automatiquement la page lorsque l'utilisateur tape dans un champ ou dont la taille de police est inférieure à 16px. Ce zoom perturbe la mise en page et l'utilisateur doit ensuite dézoomer manuellement.

Solution propre : forcer la taille de police

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px;
  }
}

Cette solution est préférable à maximum-scale=1 dans la balise , qui désactive le zoom intentionnel et pose des problèmes d'accessibilité.

Problème n°3 : la barre d'adresse Safari perturbe le layout

Safari mobile masque et affiche dynamiquement sa barre d'adresse lors du scroll. Les éléments positionnés avec 100vh ne correspondent pas à la hauteur réelle visible.

Solution moderne : les unités viewport dynamiques

/* Remplacer vh par dvh quand c'est disponible */
.hero-section {
  height: 100vh; /* Fallback */
  height: 100dvh; /* Viewport dynamique, supporté iOS 15.4+ */
}

Pour PrestaShop 8.x, si vous personnalisez le hero ou des sections plein écran, privilégiez systématiquement dvh avec un fallback vh.

Problème n°4 : les animations et effets CSS cassés sur iOS

Certaines propriétés CSS fonctionnent différemment sur WebKit :

Overflow scroll fluide

/* Nécessaire pour le scroll fluide dans les conteneurs sur iOS */
.product-list-container {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

Position sticky défaillante

position: sticky ne fonctionne pas dans un conteneur avec overflow: hidden sur iOS. Vérifiez toute la chaîne de parents :

/* ❌ Le sticky ne marchera pas sur iOS */
.parent {
  overflow: hidden;
}
.parent .sticky-cart {
  position: sticky;
  top: 0;
}

/* ✅ Solution : remplacer overflow: hidden par overflow: clip */
.parent {
  overflow: clip;
}

Backdrop-filter (flou d'arrière-plan)

.header-transparent {
  -webkit-backdrop-filter: blur(10px); /* Obligatoire pour Safari */
  backdrop-filter: blur(10px);
}

Problème n°5 : le bouton "Ajouter au panier" ne répond pas

Sur certains thèmes, le bouton d'ajout au panier ne réagit pas au tap sur iPhone. La cause est souvent un élément transparent positionné par-dessus (overlay, badge, conteneur avec z-index mal géré).

Diagnostic rapide

Dans l'inspecteur Safari distant, utilisez :

// Identifie l'élément réellement tapé
document.addEventListener('click', function(e) {
  console.log('Élément cliqué :', e.target.tagName, e.target.className);
}, true);

Si l'élément cliqué n'est pas le bouton mais un conteneur parent, ajoutez pointer-events: none sur l'élément parasite ou corrigez le z-index.

Checklist de compatibilité iOS pour PrestaShop

Avant chaque mise en production, vérifiez ces points :

• [ ] Menu de navigation accessible au tap (pas uniquement hover)
• [ ] Champs de formulaire en `font-size: 16px` minimum
• [ ] Pas de `maximum-scale=1` dans la meta viewport
• [ ] Sections plein écran en `dvh` avec fallback `vh`
• [ ] Préfixes `-webkit-` pour `backdrop-filter` et `overflow-scrolling`
• [ ] Boutons et liens cliquables sans éléments superposés
• [ ] Test sur Safari iOS réel (pas uniquement Chrome DevTools)

#responsive #iphone #ios #mobile #css #safari #menu-mobile

Questions fréquentes

Tout ce que vous devez savoir sur ce sujet.

Pourquoi mon menu PrestaShop ne s'ouvre pas sur iPhone ?

Le menu de navigation de PrestaShop repose souvent sur l'événement CSS :hover, qui n'existe pas sur les écrans tactiles. Sur iPhone, le premier tap déclenche le hover et le second suit le lien, ce qui empêche d'accéder aux sous-menus. La solution consiste à utiliser la media query @media (hover: none) pour remplacer le comportement hover par un toggle JavaScript au tap, ou à activer le menu hamburger mobile.

Comment empêcher le zoom automatique sur les formulaires PrestaShop sur iOS ?

Safari sur iOS zoome automatiquement la page lorsqu'un champ de formulaire a une taille de police inférieure à 16px. Pour corriger ce problème, appliquez font-size: 16px sur tous les éléments input, select et textarea. Évitez la solution maximum-scale=1 dans la balise meta viewport, car elle désactive le zoom volontaire et nuit à l'accessibilité.

Comment tester mon site PrestaShop sur iPhone sans posséder d'iPhone ?

La méthode la plus fiable est d'utiliser le simulateur iOS intégré à Xcode sur macOS, qui embarque le vrai moteur WebKit de Safari. Alternativement, des services comme BrowserStack ou LambdaTest permettent de tester sur de vrais appareils iOS à distance. Le mode responsive de Chrome DevTools est utile pour vérifier les dimensions, mais il ne reproduit pas les bugs spécifiques au moteur de rendu Safari.

Pourquoi mon bouton Ajouter au panier ne fonctionne pas sur iPhone ?

Ce problème est généralement causé par un élément HTML transparent (overlay, badge promotionnel, conteneur avec un z-index mal configuré) positionné par-dessus le bouton. Sur iPhone, le tap est intercepté par cet élément invisible. Utilisez l'inspecteur Safari distant pour identifier l'élément réellement cliqué, puis corrigez le z-index ou ajoutez pointer-events: none sur l'élément parasite.

Pourquoi la hauteur 100vh ne fonctionne pas correctement sur Safari iOS ?

Safari mobile affiche et masque dynamiquement sa barre d'adresse lors du scroll, ce qui modifie la hauteur visible de la page. L'unité 100vh correspond à la hauteur maximale théorique et non à la hauteur réellement affichée. Depuis iOS 15.4, utilisez l'unité 100dvh (dynamic viewport height) qui s'adapte en temps réel à la barre d'adresse, avec 100vh en fallback pour les versions antérieures.

Un projet PrestaShop ?

Discutons-en directement.

★★★★★

193 projets livrés

Votre adresse e-mail