Les longues pages statiques empilent le défilement du document, une table des matières collante avec son îlot overflow:auto, et des modales qui ne doivent ni propager l’élan vers l’arrière-plan ni voler le retour élastique à l’utilisateur. Sans contrôle explicite, l’effet caoutchouc de WebKit enchaîne le dépassement du conteneur le plus interne vers les ancêtres : défilement d’arrière-plan accidentel, clics CTA ratés, bruit d’interaction Lighthouse. En 2026, combinez overscroll-behavior: contain sur les bons conteneurs avec scrollbar-gutter stable et scroll-padding pour en-têtes fixes afin que chaînage, réserve de barre et alignement des ancres racontent la même histoire sur Safari et iOS.
Répéter ces interactions sur un Mac mini loué chez MacHTML pour environ 16,9 $/jour attrape des bugs de momentum iOS que l’automatisation Chromium desktop déclenche rarement de façon fiable en CI.
Chaînage de défilement et défauts navigateur
Le chaînage signifie qu’à la limite d’un scroller imbriqué, les deltas de molette ou tactile continuent vers les parents. Les sites marketing le détestent : l’utilisateur veut faire défiler un tableau tarifaire et déplace soudain la vidéo héro. Safari bureau et WebKit iOS chaînent par défaut ; Chromium aussi—corriger une fois profite partout.
Évitez overflow: hidden sur body avec modale ouverte : cela casse les schémas de verrouillage d’arrière-plan iOS et nuit à l’accessibilité. Préférez overscroll-behavior-y: contain sur le panneau modal et overscroll-behavior-x: none si les carrousels ne doivent jamais déclencher des gestes historique latéraux.
Les design systems doivent nommer le « propriétaire du scroll » ; sinon les wrappers et les enfants reçoivent des règles contradictoires à chaque refonte.
overscroll-behavior: contain sur les corps de modale
Appliquez sur l’élément qui possède les barres réellement manipulées :
.modal__body {
max-height: min(70vh, 640px);
overflow: auto;
overscroll-behavior: contain;
}Contain arrête le chaînage mais autorise le déplacement à l’intérieur. Ajoutez touch-action: pan-y sur iOS lorsque des curseurs horizontaux coexistent.
Pour <dialog> natif, le fond ne hérite pas de vos utilitaires—dupliquez les règles sur le dialogue et le scroller interne si les deux peuvent recevoir le focus.
Les audits WCAG doivent vérifier si le corps modal doit être focusable ou si un wrapper porte role="dialog"—cela change le comportement clavier.
Quand none est plus sûr que contain
none si vous devez désactiver pull-to-refresh dans des WebView Android hybrides ou si des graphiques analytiques horizontaux ne doivent jamais déclencher navigation arrière/avant. Plus brutal : certaines affordances utiles disparaissent ; essayez d’abord contain.
Cartes et tableaux de bord canvas peuvent exiger none sur les deux axes pour garder les gestes de glissement locaux.
Les équipes sécurité veillent à ce que none ne bloque pas une navigation légitime attendue par l’utilisateur.
auto versus réinitialisations explicites selon breakpoints
À large écran votre TOC ne défile pas ; à étroit il devient overflow:auto. Activez overscroll seulement quand le scroller imbriqué existe :
@media (max-width: 900px) {
.toc { overflow: auto; overscroll-behavior: contain; max-height: 40vh; }
}Oublier de retirer contain après changement de layout est une régression classique : le QA bureau passe, le mobile perd le chaînage voulu vers le document.
Les tests de composants isolés sans document parent mentent ; prévoyez des tests d’intégration plein viewport.
iOS Safari, touch-action et écouteurs passifs
iOS couple étroitement le défilement inertiel aux reconnaisseurs de gestes. Si un snippet analytics installe des écouteurs de molette passifs mais attend preventDefault, le CSS ne sauvera rien. Auditez les tiers ; laissez le navigateur posséder le scroll.
Testez sur affichages 120 Hz ProMotion : les conteneurs plus petits décélèrent plus vite ; le chaînage paraît plus violent.
Le débogage distant via Safari Web Inspector sur Mac mini loué reflète mieux les iPhone réels que les simulateurs seuls.
Accessibilité : pièges à focus et défilabilité
Les modales qui piègent le focus doivent rendre la zone défilable accessible au clavier ou aux flèches. Les utilisateurs de lecteurs d’écran souffrent quand le chaînage déplace la page arrière et décale les noms accessibles.
prefers-reduced-motion n’éteint pas overscroll-behavior ; réduisez les hauteurs max pour ne pas imposer d’immenses profondeurs de scroll.
Documentez quel élément porte role="dialog" et quel enfant reçoit tabindex="0" à l’ouverture programmatique.
Le QA vérifie : focus dans le corps, événements molette ne font pas défiler l’arrière-plan même sans anneau de focus visible sur le corps.
Performance, composition et pièges will-change
overscroll-behavior est peu coûteux, mais on l’associe souvent à backdrop-filter et will-change: transform, ce qui crée des couches GPU supplémentaires sur Safari mobile. Onglet Calques WebKit ; si d’anciens iPad dépassent ~512 Mo, simplifiez les ombres.
Pas de will-change: scroll-position global sur chaque carte—scopez au modal ouvert seulement.
Les animations pilotées par scroll sur le document peuvent entrer en conflit avec des scroller internes qui refusent le chaînage ; déplacez la cible d’animation vers le scroller interne si besoin.
Le marketing veut souvent du parallax ; validez les bords overscroll avant mise en production.
Feuilles d’impression et export PDF
Les PDF conformité naissent encore de pages statiques. Dans @media print, remettez overscroll à auto pour que les moteurs PDF n’écrêtent pas au max-height modal. Masquez les fonds de dialogue, rétablissez overflow du document.
Chromium headless PDF est incohérent vs Safari interactif ; gardez du CSS print du type .modal { position: static; max-height: none; overflow: visible; overscroll-behavior: auto; }.
Comparez le nombre de pages PDF avant/après contain imbriqué—croissance inattendue = carrousel qui ne se replie plus à l’impression.
Les juristes exigent parfois la complétude textuelle ; le CSS print fait partie de la chaîne de preuve.
Matrice : contain, none, auto
| Pattern UI | Recommandation | Notes |
|---|---|---|
| Texte légal modal | contain | Évite la dérive du héros |
| Grille de données imbriquée | contain sur grille, document auto | Garde le scroll page si grille non focalisée |
| Carrousel avec risque historique | none sur l’axe | Tester WebView Android séparément |
| Carte plein écran | none | Vérifier zoom tactile |
Check-list avant publication
Exécutez sur iOS minimal supporté et Safari Technology Preview récent pour attraper les durcissements mineurs de WebKit. Enregistrements vidéo pour la review design si vidéo héro plein écran reste derrière les modales.
- Ouvrir modale, flinger jusqu’à la fin, vérifier que l’arrière-plan ne bouge pas.
- Répéter avec VoiceOver / TalkBack, focus dans la modale.
- Redimensionner 1280px → 320px ; confirmer bascules media queries.
- Mesurer CLS ; coupler avec scrollbar-gutter contre les sauts de largeur.
- Saut d’ancre pied de page avec scroll-padding ; le TOC ne doit pas voler le momentum final.
Les équipes multi-pays devraient centraliser les jetons overscroll dans le design system pour éviter des utilitaires divergents par locale ; les miroirs RTL (arabe, hébreu) modifient parfois le modèle de scroll du navigateur, d’où une ligne QA RTL explicite dans la matrice overscroll.
Si des iframes tiers hébergent du contenu modal, rappelez-vous que beaucoup d’outils d’automatisation ne peuvent pas interagir avec l’intérieur des iframes : seul un Safari réel sur Mac mini permet d’observer le bleed parent↔iframe. Documentez aussi les attributs sandbox du partenaire qui peuvent influencer indirectement touch-action.
Pour les consoles admin internes affichant des milliers de lignes tabulaires dans des modales, fixez un budget perf : comptez combien de fois le compositeur crée des couches pendant un long scroll modal et si contain stabilise le temps de frame ; sinon virtualisez ou paginez côté serveur plutôt que de ne renforcer que le CSS.
Télémétrie : après ouverture modale, journalisez si des événements molette remontent jusqu’à document ; Playwright peut exiger zéro sur 200 flings.
Un Mac mini MacHTML (~16,9 $/jour) offre Safari natif et Apple Silicon pour reproduire scroller imbriqués, pièges à focus et timing ProMotion proches des designers.
Tester overscroll et modales sur Mac mini cloud
SSH/VNC vers une instance macOS dédiée pour valider chaînage, couches de dialogue et navigation par ancres ensemble.