« Le widget déborde uniquement sur la tablette de la cliente. » Ce genre de retour, difficile à reproduire tant qu’on ne dispose pas de l’appareil exact en question, a nécessité de récupérer un iPad pour observer directement le problème : une carte produit construite avec un Container flexbox, contenant une image, un titre et un bouton, dont la hauteur se comprimait de façon incohérente uniquement sur Safari mobile, jamais sur les autres navigateurs testés.
Ce cas illustre un type de bogue particulièrement frustrant : invisible sur l’environnement de développement habituel, reproductible uniquement sur une combinaison précise de navigateur et de système, ici Safari sur iPadOS.
Symptôme observé précisément
La carte produit, construite avec un Container Elementor en disposition flexbox verticale, affichait une image qui débordait légèrement de son conteneur, écrasant partiellement le titre situé juste en dessous. Le comportement était identique sur Safari desktop (macOS) et sur Chrome pour iPad : seul Safari mobile sur iPadOS reproduisait la déformation, ce qui excluait d’emblée un simple problème de moteur de rendu WebKit générique, puisque Safari desktop utilise également WebKit sans montrer le même défaut.
Isolement du bug : un comportement flexbox connu de Safari mobile
La cause identifiée touche à un comportement documenté par la communauté de développeurs front-end concernant l’implémentation flexbox de Safari sur iOS et iPadOS : un élément flexbox enfant sans hauteur minimale explicite peut, dans certaines configurations impliquant une image en object-fit: cover, voir sa hauteur calculée de façon incohérente par le moteur de rendu, spécifiquement sur cette plateforme. Ce comportement ne relève pas d’un bogue dans Elementor lui-même, mais d’une particularité du moteur de rendu de Safari mobile face à une combinaison précise de propriétés flexbox et d’image.
Le CSS généré par Elementor pour le Container concerné, une fois inspecté via les outils de développement distants Safari (accessibles depuis un Mac connecté à l’iPad), ne définissait aucune hauteur minimale explicite sur la colonne contenant l’image, laissant le calcul entièrement à la charge du moteur flexbox.
Correctif appliqué
L’ajout d’une propriété min-height explicite sur la colonne concernée, via le CSS personnalisé disponible dans l’onglet Avancé du Container, a suffi à stabiliser le rendu sur Safari mobile sans modifier visuellement l’affichage sur les autres navigateurs testés.
.carte-produit-image {
min-height: 220px;
overflow: hidden;
}
.carte-produit-image img {
height: 100%;
object-fit: cover;
}Cette valeur de 220 pixels correspond à la hauteur visuelle attendue de l’image dans la maquette d’origine ; elle a été testée directement sur l’iPad physique après chaque ajustement, plutôt que déduite uniquement d’un émulateur de navigateur, pour confirmer la disparition réelle du défaut.
Ce que ce cas rappelle sur les tests cross-navigateurs
- Un émulateur mobile intégré aux outils de développement d’un navigateur desktop ne reproduit pas toujours fidèlement le moteur de rendu réel d’un appareil physique.
- Safari mobile mérite un test dédié sur appareil réel pour tout projet dont l’audience utilise significativement des appareils Apple.
- Une hauteur minimale explicite sur les enfants flexbox contenant une image reste une précaution raisonnable, même en l’absence de bogue constaté au moment du développement.
Un défaut invisible sur trois navigateurs et présent sur un seul justifie toujours de tester sur l’appareil réel avant de conclure à une fausse alerte.
En résumé
Ce cas, résolu par une seule propriété CSS ajoutée avec précision, rappelle qu’un rendu flexbox jugé fiable sur la majorité des navigateurs peut encore réserver des surprises sur une plateforme précise. Garder un appareil de test physique à disposition, même occasionnellement, reste la méthode la plus fiable pour confirmer ce type de correctif avant de le considérer comme définitivement réglé.
