Google Chrome 使用 Flexbox 视口锚定扩展方向

Question

<p>Google Chrome 中存在一个问题，当元素放置在具有<code>之间有空格</code的<em>相邻</em> Flex 项目的 Flexbox 容器内时，元素会相对于视口以不同方向展开/折叠> 或 <code>center</code> 对齐内容。</p> <p>这在 Firefox、IE11、Edge 或 Safari 中不是问题，因为元素始终向下扩展。</p> <p>我很好奇：</p> <ul> <li>Chrome 的行为是否遵循某些规范？如果有，是哪一个？</li> <li>如果不是，那为什么要在 Chrome 中这样做？ （恕我直言，点击触发器在屏幕外随机消失是可怕的用户体验。）</li> <li>可以通过某种方式修改或禁用 Chrome 的行为吗？例如。通过 CSS 或元标记？</li> </ul> <p><strong>更新 1：如果可能的话，我已在 chromium bug tracker 上提交了问题 #739860，寻求 Chromium 开发人员的见解/解释。</strong></p> <hr> <p>下面插入了两个示例。描述该问题的完整测试套件可以在这支笔中找到：https://codepen.io/jameswilson/full/xrpRPg/ 我选择在本示例中使用 slipToggle，以便展开/折叠运动是动画的并且对眼。详细信息标签也会发生相同的行为，但还没有跨浏览器支持，并且展开/折叠太卡顿了。</p> <p><strong>示例 1：Chrome 对准 Flexbox 之间的展开/折叠行为的空格</strong></p> <p>

$('button').click(function() {
  $(this).next().slideToggle();
})</pre>
body {
  边距：30 像素；
  字体系列：无衬线字体；
}
在旁边，
除了div，
概括，
主要的，
按钮，
详情 p,
按钮 + p {
  背景：rgba(0,0,0,.09);
  边框：无；
  内边距：20px；
  保证金：0；
}

.flex容器{
  显示：柔性；
}
在旁边 {
  弹性：1；
  位置：相对；
  最大宽度：25%；
  背景：薄荷奶油；

  显示：柔性；
  弯曲方向：列；
  位置：相对；
}
aside.space- Between {
  对齐内容：空间之间；
}
放在一边.center {
  调整内容：居中；
}

主要的 {
  弹性：3；
  位置：相对；
  最大宽度：75%；
  背景：爱丽丝蓝；
  垂直对齐：顶部；
  高度：100%；
}
主要> * + * {
  顶部边距：20px；
}

按钮 + p {
  显示：无；
}</pre>
<脚本 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</脚本>

<节类=“flexcontainer”>
  <aside class="space- Between">
    
顶部侧边栏
    
底部侧边栏
  </旁白>
  <主要>
    

      <按钮>slideToggle
      <p>其他浏览器：始终向下展开。<br>
        Chrome：应始终向下展开，因为顶部边栏始终可见。

    

    

      slideToggle（通常向下展开）
      <p>其他浏览器：始终向下展开。<br>
        Chrome：应向下展开，同时底部侧边栏和顶部侧边栏均可见。但如果您向下滚动足够远以使顶部侧边栏超出屏幕，则会向上扩展。

    
    
    

      slideToggle（通常向下展开）
      <p>其他浏览器：始终向下展开。<br>
        Chrome：应向下展开，同时底部侧边栏和顶部侧边栏均可见。但如果您向下滚动足够远以使顶部侧边栏超出屏幕，则会向上扩展。

    
;
  </主要>
</节></pre>


</p>

<p><strong>示例 2：Chrome 对居中对齐的 Flexbox 的展开/折叠行为</strong></p>



<p>

$('button').click(function() {
  $(this).next().slideToggle();
})</pre>
body {
  边距：30 像素；
  字体系列：无衬线字体；
}
在旁边，
除了div，
概括，
主要的，
按钮，
详情 p,
按钮 + p {
  背景：rgba(0,0,0,.09);
  边框：无；
  内边距：20px；
  保证金：0；
}

.flex容器{
  显示：柔性；
}
在旁边 {
  弹性：1；
  位置：相对；
  最大宽度：25%；
  背景：薄荷奶油；

  显示：柔性；
  弯曲方向：列；
  位置：相对；
}
aside.space- Between {
  对齐内容：空间之间；
}
放在一边.center {
  调整内容：居中；
}

主要的 {
  弹性：3；
  位置：相对；
  最大宽度：75%；
  背景：爱丽丝蓝；
  垂直对齐：顶部；
  高度：100%；
}
主要> * + * {
  顶部边距：20px；
}

按钮 + p {
  显示：无；
}</pre>
<脚本 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</脚本>
<节类=“flexcontainer”>
  

    
中心侧边栏
  </旁白>
  <主要>

    

      slideToggle（通常向下展开）
      <p>其他浏览器：始终向下展开。<br>
        Chrome：通常向下扩展。当容器的顶部边缘滚动出视口时，会向两个方向扩展。

    

    

      <按钮>slideToggle
      <p>其他浏览器：始终向下展开。<br>
        Chrome：通常向下扩展。当容器的顶部边缘滚动出视口时，会向两个方向扩展。

    

    

      slideToggle（通常向下展开）
      <p>其他浏览器：始终向下展开。<br>
        Chrome：通常向下扩展。当容器的顶部边缘滚动出视口时，会向两个方向展开，但当中心侧边栏滚动出视图时，会再次恢复向下展开。

    
  </主要>
</节></pre>


</p>            

Answer 1

将此代码添加到您的 Flex 容器中：

• 溢出锚：无

这将禁用 Chrome 中称为“滚动锚定”的功能，该功能会导致框向上扩展 (修订的代码笔）。

---

在 Chrome 中，展开框的向上/向下方向由视口中的滚动位置决定，而不是布局本身。

为了改善用户体验，Chrome 针对这种行为采取了独特的方法。

基本上，它们将 DOM 元素绑定到当前滚动位置。屏幕上这个特定（“锚点”）元素的移动将确定对滚动位置的调整（如果有）。

他们将这种方法称为“滚动锚定”。该算法在此页面上进行了解释： https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md

此行为目前是 Chrome 独有的，但Google 正在推动标准化。

根据滚动锚定文档，将 overflow-anchor: none 应用到适当的元素将禁用滚动锚定调整。

更多信息：

• https://github.com/WICG/ScrollAnchoring/blob/master/解释器.md
• https://bugs.chromium.org/p/chromium/问题/详细信息？id=739860
• https://hacks.mozilla.org/2019 /03/scroll-anchoring-in-firefox-66/
• 更改 CSS 弹性顺序会导致滚动