Contain Paint & Overflow Clip
- clip
- contain
- overflow
- sticky
À utiliser plutôt qu'overflow-hidden pour empêcher le débordement d'un conteneur.
Pourquoi overflow: hidden empêche position: sticky de fonctionner ?
D'abord, il a fallut diagnostiquer que mon problème provenait bien de la propriété overflow: hidden.
The box's position depends on its containing block (established as for position: static) as well as its scrolling container, defined by the nearest ancestor in the same document with a computed value for 'overflow-x' or 'overflow-y' other than 'visible', or the viewport if no such ancestor exists.
— Corey Ford, Sticky Positioning
Pour résumer, position: sticky est en relation directe avec son dernier container défilable – et utiliser overflow: hidden vient réinitialiser ce contexte qui devient défilable, même si techniquement non (les barres sont simplement masquées).
Comment résoudre le problème ?
- Remplacer
overflow: hiddenparcontain: paint. Empêche le débordement, ne réinitialise pas le contexte défilable. À savoir que cette propriété influencera le positionnement des élémentsfixedetabsolute. - Remplacer par
overflow: clip. Empêche le débordement et ne réinitialise pas le contexte défilable. Il faut savoir que cette valeur ne crée pas de contexte de formatage de blocs (contrairement à hidden ou scroll).