Direction de développement ancrée dans Google Chrome avec flexbox

Il y a un problème dans Google Chrome où les éléments se développent / se réduisent dans différentes directions par rapport à la fenêtre d’affichage lorsqu’ils sont placés dans un conteneur Flexbox avec un élément Flex adjacent ayant un contenu space-between ou un contenu justifié au center .

Ce n’est pas un problème dans Firefox, IE11, Edge ou Safari car les éléments se développent toujours vers le bas.

Je suis curieux:

  • Le comportement de Chrome ici est-il conforme à certaines spécifications? Si oui, lequel?
  • Si non, alors pourquoi cela a-t-il été fait dans Chrome? (IMHO, c’est horrible pour UX que le déclencheur de clic disparaisse aléatoirement.)
  • Le comportement de Chrome peut-il être modifié ou désactivé de quelque manière? Par exemple. via CSS ou méta-tag?

Mise à jour 1: J’ai classé le problème # 739860 sur le suivi des bugs par le chrome cherchant des explications / explications de la part de devs Chrome, si possible.


Voici deux exemples insérés ci-dessous. La suite de tests complète décrivant le problème se trouve sous la forme suivante: https://codepen.io/jameswilson/full/xrpRPg/ J’ai choisi d’utiliser slideToggle dans cet exemple pour que le mouvement de développement / réduction soit animé et visible. l’oeil. Le même comportement se produit avec la balise details, mais la prise en charge inter-navigateurs n’y est pas encore disponible et la fonction expand / collapse est trop janky.

Exemple 1: comportement de développement / réduction de Chrome pour l’espace entre les flexbox justifiées

le comportement d'expansion / réduction de chrome pour un espace-entre justifié

 $('button').click(function() { $(this).next().slideToggle(); }) 
 body { margin: 30px; font-family: sans-serif; } aside, aside div, summary, main, button, details p, button + p { background: rgba(0,0,0,.09); border: none; padding: 20px; margin: 0; } .flexcontainer { display: flex; } aside { flex: 1; position: relative; max-width: 25%; background: mintcream; display: flex; flex-direction: column; position: relative; } aside.space-between { justify-content: space-between; } aside.center { justify-content: center; } main { flex: 3; position: relative; max-width: 75%; background: aliceblue; vertical-align: top; height: 100%; } main > * + * { margin-top: 20px; } button + p { display: none; } 
  

Other browsers: always expands downward.
Chrome: Should always expand downward because Top Sidebar is always visible.

Other browsers: always expands downward.
Chrome: Should expand downward while Bottom Sidebar and Top Sidebar are both visible. But will expand upward if you scroll down far enough so that Top Sidebar is off-screen.

Other browsers: always expands downward.
Chrome: Should expand downward while Bottom Sidebar and Top Sidebar are both visible. But will expand upward if you scroll down far enough so that Top Sidebar is off-screen.

Exemple 2: comportement de développement / réduction de Chrome pour la flexbox justifiée au centre

Comportement de développement / réduction de Chrome pour la flexbox justifiée au centre

 $('button').click(function() { $(this).next().slideToggle(); }) 
 body { margin: 30px; font-family: sans-serif; } aside, aside div, summary, main, button, details p, button + p { background: rgba(0,0,0,.09); border: none; padding: 20px; margin: 0; } .flexcontainer { display: flex; } aside { flex: 1; position: relative; max-width: 25%; background: mintcream; display: flex; flex-direction: column; position: relative; } aside.space-between { justify-content: space-between; } aside.center { justify-content: center; } main { flex: 3; position: relative; max-width: 75%; background: aliceblue; vertical-align: top; height: 100%; } main > * + * { margin-top: 20px; } button + p { display: none; } 
  

Other browsers: always expands downward.
Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport.

Other browsers: always expands downward.
Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport.

Other browsers: always expands downward.
Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport, but then resumes expanding downwards again when Center Sidebar scrolls out of view.

Ajoutez ce code à votre conteneur flex:

  • overflow-anchor: none

Cela désactivera dans Chrome une fonctionnalité appelée “ancrage par défilement”, qui provoque l’extension vers le haut des boîtes ( code codé révisé ).


Dans Chrome, le sens ascendant / descendant des zones dépliantes est régi par la position de défilement dans la fenêtre, et non par la présentation elle-même.

Chrome adopte une approche unique à ce problème dans le but d’améliorer l’expérience utilisateur.

Fondamentalement, ils lient un élément DOM à la position de défilement actuelle. Le mouvement de cet élément particulier (“ancre”) à l’écran déterminera un ajustement éventuel de la position de défilement.

Ils appellent cette approche “Scroll Anchoring”. L’algorithme est expliqué sur cette page: https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md

Ce comportement est actuellement unique à Chrome, mais Google préconise la normalisation.

Conformément à la documentation sur l’ancrage de défilement, l’application overflow-anchor: none aux éléments appropriés désactivera les ajustements d’ancrage de défilement.

Plus d’information: