# Cette popup Elementor rejoue son animation en boucle sur Safari iOS

> Sur mobile Safari, certaines popups Elementor Pro rejouent leur animation d'entrée en boucle. Diagnostic du bug et correctif testé par des intégrateurs.

- Auteur : WordPress Développement
- Publié le : 2020-09-10
- Mis à jour le : 2020-09-10
- Catégorie : Elementor
- URL : https://www.wpmoderne.fr/elementor/popup-elementor-safari-ios-boucle-animation/

## L’essentiel

- L'animation d'entrée rejoue à chaque changement de barre d'adresse Safari
- Le déclencheur repose sur un événement de scroll mal interprété sur iOS
- Un correctif CSS ciblé neutralise la répétition sans désactiver l'animation

Symptôme signalé par plusieurs intégrateurs sur des forums d'entraide Elementor : une popup configurée pour s'afficher après un délai ou un pourcentage de défilement rejoue son animation d'entrée plusieurs fois de suite sur iPhone, alors que le même réglage fonctionne parfaitement sur desktop et sur Android. L'utilisateur voit la popup apparaître, disparaître visuellement puis réapparaître avec la même animation, sans avoir rien fait de particulier.

Ce comportement, gênant surtout parce qu'il donne une impression de site instable, mérite un diagnostic précis avant de désactiver purement et simplement les animations sur mobile, ce qui reviendrait à perdre un effet voulu par le design sans en comprendre la cause.

## Symptôme observé en détail

Le déclenchement se produit typiquement quand la popup est réglée sur un défilement de page comme condition d'affichage. Sur Safari iOS, faire défiler la page provoque l'apparition puis la disparition de la barre d'adresse du navigateur, ce qui modifie la hauteur visible de la fenêtre (le fameux `viewport`) plusieurs fois pendant un seul geste de défilement continu de l'utilisateur.

Chaque changement de hauteur de fenêtre déclenche un nouvel événement de redimensionnement, que le script de la popup Elementor peut interpréter à tort comme une nouvelle condition de défilement remplie, relançant ainsi l'animation d'entrée à chaque petit changement de la barre d'adresse.

## Diagnostic : isoler la cause réelle

> L'essentiel à retenir : L'animation d'entrée rejoue à chaque changement de barre d'adresse Safari ; Le déclencheur repose sur un événement de scroll mal interprété sur iOS ; Un correctif CSS ciblé neutralise la répétition sans désactiver l'animation

Pour confirmer cette hypothèse, il faut ouvrir les outils de développement à distance sur un appareil iOS connecté à un Mac via Safari, et observer dans la console la fréquence des événements de redimensionnement pendant un défilement lent. Si ces événements se déclenchent plusieurs fois par seconde alors que la fenêtre du navigateur, elle, ne change pas réellement de taille physique, la cause est confirmée : c'est bien la barre d'adresse dynamique de Safari, pas un bug du code de la popup en tant que tel.

Un test complémentaire consiste à désactiver temporairement uniquement la condition de défilement de la popup, en la remplaçant par un délai fixe en secondes : si l'animation ne se répète plus dans ce cas, cela confirme que le déclencheur en cause est bien le défilement, pas l'animation elle-même.

## Le correctif appliqué

La solution la plus stable, sans toucher au cœur du plugin Elementor, consiste à ajouter une règle CSS media query ciblant spécifiquement les petites largeurs d'écran, qui neutralise la propriété d'animation répétée sur l'élément de la popup après son premier affichage, via une classe ajoutée par du CSS personnalisé au niveau du site.

```
@media (max-width: 480px) {
  .elementor-popup-modal.dialog-widget-content {
    animation-iteration-count: 1 !important;
  }
}
```

Cette règle limite explicitement le nombre de répétitions de l'animation à une seule occurrence, quel que soit le nombre de fois où l'événement de redimensionnement se déclenche derrière, sans désactiver l'effet d'entrée voulu au premier affichage.

## Test de non-régression

- Vérifier l'affichage de la popup sur un vrai appareil iOS, pas seulement en simulateur de largeur dans le navigateur desktop.
- Confirmer que l'animation joue bien une fois à l'apparition initiale de la popup.
- Faire défiler la page longuement après l'apparition, pour s'assurer que rien ne se rejoue.
- Répéter le test sur Android pour vérifier l'absence d'effet de bord sur cette plateforme.

## Ce que ce correctif ne traite pas

Le comportement des popups sur desktop n'est pas concerné par ce correctif, la barre d'adresse dynamique étant un comportement propre aux navigateurs mobiles. Sur desktop, les déclencheurs de défilement se comportent normalement et ne nécessitent aucune règle CSS supplémentaire de ce type.

> Avant de blâmer Elementor pour un bug d'affichage mobile, toujours tester d'abord sur un vrai téléphone : une bonne partie des « bugs » signalés sur les forums viennent en réalité d'un comportement propre au navigateur mobile, pas du plugin.

## Prévention pour les prochains projets

Sur les projets suivants qui utilisent des popups déclenchées au défilement, ajouter systématiquement cette règle de limitation d'itération dans la feuille de style personnalisée du site évite de redécouvrir ce même symptôme à chaque nouveau client. Un petit gain de discipline qui économise, à terme, plusieurs heures de diagnostic répété sur des projets différents.