[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":22,"$fTP9ifSXLCXJLldcWyGbR21-AxutNP_juZWLL2wrdndY":103,"megamenu":143,"footer-db":199,"header-db":217,"$fhWQUSnEjRdzSqVj5ThL3bK5SWonpnXyTBkojznPzSs8":228},{"theme":4},{"colors":5,"typography":13,"ui":17,"defaultColorMode":21},{"primary":6,"secondary":7,"background":8,"foreground":9,"muted":10,"headerBg":11,"footerBg":12,"topBarBg":9,"topBarText":11},"#4F46E5","#0D9488","#F9FAFB","#111827","#6B7280","#ffffff","#020617",{"fontFamily":14,"fontUrl":15,"baseFontSize":16},"Inter, system-ui, sans-serif","https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700&display=swap","16px",{"borderRadius":18,"contentWidth":19,"shadow":20},"lg","7xl",true,"light",{"columns":23},[24,40,70,91],{"title":25,"links":26},"Plateforme",[27,31,34,37],{"label":28,"href":29,"external":30},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":32,"href":33,"external":30},"Devenir Ambassadeur","\u002Fambassadeur",{"label":35,"href":36,"external":30},"Modules PrestaShop","\u002Fmodules",{"label":38,"href":39,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":41,"links":42},"Le Synedre",[43,46,49,52,55,58,61,64,67],{"label":44,"href":45,"external":30},"L'histoire","\u002Fsynedre",{"label":47,"href":48,"external":30},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":50,"href":51,"external":30},"L'équipe","\u002Fequipe",{"label":53,"href":54,"external":30},"Le réacteur en direct","\u002Freacteur",{"label":56,"href":57,"external":30},"Le Drill (entraînement)","\u002Fdrill",{"label":59,"href":60,"external":30},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":62,"href":63,"external":30},"Les agents IA","\u002Fagents-ia",{"label":65,"href":66,"external":30},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":68,"href":69,"external":30},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":71,"links":72},"Ressources",[73,76,79,82,85,88],{"label":74,"href":75,"external":30},"Blog","\u002Fblog",{"label":77,"href":78,"external":30},"Academy","\u002Facademy",{"label":80,"href":81,"external":30},"Dictionnaire","\u002Fdictionnaire",{"label":83,"href":84,"external":30},"Expertise PrestaShop","\u002Fexpertise",{"label":86,"href":87,"external":30},"Flywheel","\u002Fflywheel",{"label":89,"href":90,"external":30},"Manifeste","\u002Fmanifeste",{"title":92,"links":93},"À propos",[94,97,100],{"label":95,"href":96,"external":30},"Alexandre Carette","\u002Fa-propos",{"label":98,"href":99,"external":30},"Dossier de presse","\u002Fpresse",{"label":101,"href":102,"external":30},"Contact","\u002Fcontact",{"title":104,"slug":105,"metaDescription":106,"category":107,"tags":108,"difficulty":116,"psVersions":117,"content":121,"faq":122,"tldr":138,"readingTime":139,"generatedAt":140,"publishDate":140,"relatedArticles":141,"sourceCategory":142},"Résoudre les problèmes d'affichage PrestaShop sur iPhone et iOS","problemes-affichage-prestashop-iphone-ios","Guide complet pour diagnostiquer et corriger les bugs d'affichage PrestaShop sur iPhone : menu déroulant, zoom, viewport et CSS spécifiques iOS.","design",[109,110,111,112,113,114,115],"responsive","iphone","ios","mobile","css","safari","menu-mobile","intermediaire",[118,119,120],"1.6","1.7","8.x","\u003Ch1>Résoudre les problèmes d'affichage PrestaShop sur iPhone et iOS\u003C\u002Fh1>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>Après plus de dix ans d'intégration PrestaShop, voici les problèmes iOS les plus fréquents et leurs solutions éprouvées.\u003C\u002Fp>\n\u003Ch2>Diagnostic préalable : tester correctement sur iPhone\u003C\u002Fh2>\n\u003Cp>Avant toute correction, il est essentiel de reproduire le problème dans des conditions fiables.\u003C\u002Fp>\n\u003Ch3>Les outils de test recommandés\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>**Safari > Développement > Simulateur iOS** (macOS uniquement) : le plus fiable, utilise le vrai moteur WebKit\u003C\u002Fli>\n\u003Cli>**Chrome DevTools** en mode responsive : utile pour le dimensionnement, mais ne reproduit pas les bugs spécifiques à Safari\u002FWebKit\u003C\u002Fli>\n\u003Cli>**BrowserStack ou LambdaTest** : test sur de vrais appareils à distance, indispensable pour les bugs critiques\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\u003Cstrong>Attention :\u003C\u002Fstrong> 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.\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch3>Activer le debug distant Safari\u003C\u002Fh3>\n\u003Cp>Pour inspecter directement votre boutique depuis un iPhone physique :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Sur l'iPhone : **Réglages > Safari > Avancé > Inspecteur Web** → Activer\u003C\u002Fli>\n\u003Cli>Connectez l'iPhone au Mac via USB\u003C\u002Fli>\n\u003Cli>Dans Safari desktop : **Développement > [Nom de l'iPhone] > [URL de la page]**\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Cette méthode vous donne accès à la console JavaScript et à l'inspecteur CSS directement sur l'appareil.\u003C\u002Fp>\n\u003Ch2>Problème n°1 : le menu déroulant ne fonctionne pas sur iPhone\u003C\u002Fh2>\n\u003Cp>C'est le bug le plus fréquemment signalé. Le menu de navigation se déploie au survol (\u003Ccode>:hover\u003C\u002Fcode>) sur desktop, mais sur un écran tactile, il n'y a pas de survol — uniquement des taps.\u003C\u002Fp>\n\u003Ch3>Cause technique\u003C\u002Fh3>\n\u003Cp>Les thèmes PrestaShop classiques (notamment ceux basés sur le thème par défaut 1.6) utilisent des événements \u003Ccode>:hover\u003C\u002Fcode> en CSS ou \u003Ccode>mouseenter\u003C\u002Fcode> en JavaScript pour afficher les sous-menus. Sur iOS, le premier tap déclenche le \u003Ccode>:hover\u003C\u002Fcode>, mais le second tap suit le lien — ce qui empêche de naviguer dans les sous-catégories.\u003C\u002Fp>\n\u003Ch3>Solution CSS : le menu accessible au tap\u003C\u002Fh3>\n\u003Cp>Pour PrestaShop 1.6 et ses thèmes dérivés, remplacez la logique hover par une approche compatible tactile :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Désactiver le hover sur les écrans tactiles *\u002F\n@media (hover: none) and (pointer: coarse) {\n  #block_top_menu ul.menu-content {\n    display: none;\n  }\n\n  #block_top_menu li.sfHoverForce > ul.menu-content {\n    display: block;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Solution JavaScript : toggle au tap\u003C\u002Fh3>\n\u003Cp>Pour un contrôle plus fin, utilisez un script qui bascule l'affichage au tap :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\ndocument.addEventListener('DOMContentLoaded', function () {\n  if ('ontouchstart' in window) {\n    document.querySelectorAll('#_desktop_top_menu .category').forEach(function (item) {\n      var link = item.querySelector('a[data-depth=\"0\"]');\n      var submenu = item.querySelector('.popover');\n\n      if (link && submenu) {\n        link.addEventListener('click', function (e) {\n          var isOpen = submenu.classList.contains('shown');\n\n          \u002F\u002F Fermer tous les autres sous-menus\n          document.querySelectorAll('#_desktop_top_menu .popover.shown').forEach(function (el) {\n            el.classList.remove('shown');\n          });\n\n          if (!isOpen) {\n            e.preventDefault();\n            submenu.classList.add('shown');\n          }\n        });\n      }\n    });\n  }\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Sur PrestaShop 8.x avec le thème Classic\u003C\u002Fh3>\n\u003Cp>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 \u003Ccode>@media (hover: none)\u003C\u002Fcode> plutôt que des breakpoints fixes.\u003C\u002Fp>\n\u003Ch2>Problème n°2 : zoom automatique sur les champs de formulaire\u003C\u002Fh2>\n\u003Cp>iOS zoome automatiquement la page lorsque l'utilisateur tape dans un champ \u003Ccode>\u003Cinput>\u003C\u002Fcode> ou \u003Ccode>\u003Cselect>\u003C\u002Fcode> dont la taille de police est inférieure à 16px. Ce zoom perturbe la mise en page et l'utilisateur doit ensuite dézoomer manuellement.\u003C\u002Fp>\n\u003Ch3>Solution propre : forcer la taille de police\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-css\">\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n  input[type=\"text\"],\n  input[type=\"email\"],\n  input[type=\"password\"],\n  input[type=\"tel\"],\n  input[type=\"number\"],\n  input[type=\"search\"],\n  select,\n  textarea {\n    font-size: 16px;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cette solution est préférable à \u003Ccode>maximum-scale=1\u003C\u002Fcode> dans la balise \u003Ccode>\u003Cmeta viewport>\u003C\u002Fcode>, qui désactive le zoom intentionnel et pose des problèmes d'accessibilité.\u003C\u002Fp>\n\u003Ch2>Problème n°3 : la barre d'adresse Safari perturbe le layout\u003C\u002Fh2>\n\u003Cp>Safari mobile masque et affiche dynamiquement sa barre d'adresse lors du scroll. Les éléments positionnés avec \u003Ccode>100vh\u003C\u002Fcode> ne correspondent pas à la hauteur réelle visible.\u003C\u002Fp>\n\u003Ch3>Solution moderne : les unités viewport dynamiques\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Remplacer vh par dvh quand c'est disponible *\u002F\n.hero-section {\n  height: 100vh; \u002F* Fallback *\u002F\n  height: 100dvh; \u002F* Viewport dynamique, supporté iOS 15.4+ *\u002F\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Pour PrestaShop 8.x, si vous personnalisez le hero ou des sections plein écran, privilégiez systématiquement \u003Ccode>dvh\u003C\u002Fcode> avec un fallback \u003Ccode>vh\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Problème n°4 : les animations et effets CSS cassés sur iOS\u003C\u002Fh2>\n\u003Cp>Certaines propriétés CSS fonctionnent différemment sur WebKit :\u003C\u002Fp>\n\u003Ch3>Overflow scroll fluide\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Nécessaire pour le scroll fluide dans les conteneurs sur iOS *\u002F\n.product-list-container {\n  -webkit-overflow-scrolling: touch;\n  overflow-y: auto;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Position sticky défaillante\u003C\u002Fh3>\n\u003Cp>\u003Ccode>position: sticky\u003C\u002Fcode> ne fonctionne pas dans un conteneur avec \u003Ccode>overflow: hidden\u003C\u002Fcode> sur iOS. Vérifiez toute la chaîne de parents :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* ❌ Le sticky ne marchera pas sur iOS *\u002F\n.parent {\n  overflow: hidden;\n}\n.parent .sticky-cart {\n  position: sticky;\n  top: 0;\n}\n\n\u002F* ✅ Solution : remplacer overflow: hidden par overflow: clip *\u002F\n.parent {\n  overflow: clip;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Backdrop-filter (flou d'arrière-plan)\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-css\">\n.header-transparent {\n  -webkit-backdrop-filter: blur(10px); \u002F* Obligatoire pour Safari *\u002F\n  backdrop-filter: blur(10px);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Problème n°5 : le bouton \"Ajouter au panier\" ne répond pas\u003C\u002Fh2>\n\u003Cp>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 \u003Ccode>z-index\u003C\u002Fcode> mal géré).\u003C\u002Fp>\n\u003Ch3>Diagnostic rapide\u003C\u002Fh3>\n\u003Cp>Dans l'inspecteur Safari distant, utilisez :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\n\u002F\u002F Identifie l'élément réellement tapé\ndocument.addEventListener('click', function(e) {\n  console.log('Élément cliqué :', e.target.tagName, e.target.className);\n}, true);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Si l'élément cliqué n'est pas le bouton mais un conteneur parent, ajoutez \u003Ccode>pointer-events: none\u003C\u002Fcode> sur l'élément parasite ou corrigez le \u003Ccode>z-index\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Checklist de compatibilité iOS pour PrestaShop\u003C\u002Fh2>\n\u003Cp>Avant chaque mise en production, vérifiez ces points :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>[ ] Menu de navigation accessible au tap (pas uniquement hover)\u003C\u002Fli>\n\u003Cli>[ ] Champs de formulaire en `font-size: 16px` minimum\u003C\u002Fli>\n\u003Cli>[ ] Pas de `maximum-scale=1` dans la meta viewport\u003C\u002Fli>\n\u003Cli>[ ] Sections plein écran en `dvh` avec fallback `vh`\u003C\u002Fli>\n\u003Cli>[ ] Préfixes `-webkit-` pour `backdrop-filter` et `overflow-scrolling`\u003C\u002Fli>\n\u003Cli>[ ] Boutons et liens cliquables sans éléments superposés\u003C\u002Fli>\n\u003Cli>[ ] Test sur Safari iOS réel (pas uniquement Chrome DevTools)\u003C\u002Fli>\n\u003C\u002Ful>",[123,126,129,132,135],{"q":124,"a":125},"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.",{"q":127,"a":128},"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é.",{"q":130,"a":131},"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.",{"q":133,"a":134},"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.",{"q":136,"a":137},"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.","Les problèmes d'affichage PrestaShop sur iPhone sont principalement causés par les spécificités de Safari\u002FWebKit : menus hover incompatibles avec le tactile, zoom automatique sur les formulaires, unité vh incorrecte et préfixes CSS manquants. Ce guide couvre les cinq bugs les plus fréquents avec leurs solutions CSS et JavaScript à jour.",6,"2026-03-21T16:57:34.000Z",[],"PrestaShop pour les développeurs",{"items":144},[145,154,160,166,174,182,188,193],{"id":146,"type":147,"label":148,"href":84,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":150,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":30,"position":151,"children":152,"psChildren":153},41,"link",{"fr":149},"Expertise",null,0,[],[],{"id":155,"type":147,"label":156,"href":75,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":150,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":30,"position":157,"children":158,"psChildren":159},42,{"fr":74},1,[],[],{"id":161,"type":147,"label":162,"href":36,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":150,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":30,"position":163,"children":164,"psChildren":165},43,{"fr":35},2,[],[],{"id":167,"type":147,"label":168,"href":170,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":150,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":30,"position":171,"children":172,"psChildren":173},44,{"fr":169},"Outils IA","\u002Foutils-ia",3,[],[],{"id":175,"type":147,"label":176,"href":29,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":178,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":30,"position":179,"children":180,"psChildren":181},45,{"fr":177},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":183,"type":147,"label":184,"href":78,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":150,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":30,"position":185,"children":186,"psChildren":187},46,{"fr":77},5,[],[],{"id":189,"type":147,"label":190,"href":96,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":150,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":30,"position":139,"children":191,"psChildren":192},47,{"fr":92},[],[],{"id":194,"type":147,"label":195,"href":102,"icon":150,"description":150,"badge":150,"groupTitle":150,"style":150,"gridColumns":150,"cssClass":150,"psCategoryId":150,"showPsChildren":30,"position":196,"children":197,"psChildren":198},48,{"fr":101},7,[],[],{"footer":200},{"theme":201,"description":150,"hours":150,"logo":202,"contact":205,"social":206,"bottomBar":216},"dark",{"src":203,"href":204,"alt":95},"\u002Flogo-ac.svg","\u002F",{"email":150,"phone":150,"address":150,"cta":150},[207,210,213],{"platform":208,"href":209,"label":208},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":211,"href":212,"label":211},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":214,"href":215,"label":214},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":150},{"header":218},{"logo":219,"topBar":222,"contactEmail":225,"features":226,"navBar":150},{"src":203,"alt":220,"text":95,"href":204,"class":221},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":150,"showLanguages":30,"align":223,"languages":224},"left",[],"contact@alexandrecarette.fr",{"showSearch":30,"showWishlist":30,"showLogin":20,"showContact":30,"showCart":30,"stickyHeader":20,"headerLayout":227},"inline",{"academy":229,"blog":230,"expertise":241},[],[231,235,238],{"title":232,"url":233,"score":157,"type":234},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":236,"url":237,"score":157,"type":234},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":239,"url":240,"score":157,"type":234},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[]]