使用flexbox的谷歌浏览器视口锚定扩展方向

Question

Google Chrome中存在一个问题,即当元素放置在Flexbox容器内且相邻的 Flex项目具有space-between或center对齐内容时,元素在相对于视口的不同方向上展开/折叠.

这在Firefox,IE11,Edge或Safari中不是问题,因为元素总是向下扩展.

我很好奇:

• Chrome的行为是否符合某些规范？如果是这样,哪一个？
• 如果没有,那么为什么在Chrome中完成？(恕我直言,点击触发器随机消失,这是一个可怕的用户体验.)
• 某些人可以修改或禁用Chrome的行为吗？例如.通过CSS或元标记？

更新1:如果可能的话,我已经向铬虫追踪者提交了问题#739860,寻求Chromium开发者的见解/解释.

---

以下是插入的两个示例.可以在此笔中找到描述该问题的完整测试套件:https: //codepen.io/jameswilson/full/xrpRPg/我已选择在此示例中使用slideToggle,以便展开/折叠动画是动画的并且可见眼.详细信息标记也会出现相同的行为,但是目前还没有跨浏览器支持,并且展开/折叠太过笨拙.

例1:Chrome在合理的Flexbox之间的空间展开/折叠行为

$('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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="flexcontainer">
  <aside class="space-between">
    <div>Top Sidebar</div>
    <div>Bottom Sidebar</div>
  </aside>
  <main>
    <div>
      <button>slideToggle</button>
      <p>Other browsers: always expands downward.<br>
        Chrome: Should always expand downward because Top Sidebar is always visible.</p>
    </div>

    <div>
      <button>slideToggle (usually expands down)</button>
      <p>Other browsers: always expands downward.<br>
        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.</p>
    </div>
    
    <div>
      <button>slideToggle (usually expands down)</button>
      <p>Other browsers: always expands downward.<br>
        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.</p>
    </div>
  </main>
</section>

例2:Chrome的中心对齐flexbox的扩展/折叠行为

$('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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flexcontainer">
  <aside class="center">
    <div>Center Sidebar</div>
  </aside>
  <main>

    <div>
      <button>slideToggle (usually expands downwards)</button>
      <p>Other browsers: always expands downward.<br>
        Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport.</p>
    </div>

    <div>
      <button>slideToggle</button>
      <p>Other browsers: always expands downward.<br>
        Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport.</p>
    </div>

    <div>
      <button>slideToggle (usually expands downwards)</button>
      <p>Other browsers: always expands downward.<br>
        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.</p>
    </div>
  </main>
</section>

Answer 1

将此代码添加到Flex容器中:

• overflow-anchor: none

这将禁用Chrome中称为"滚动锚定"的功能,这会导致框的向上扩展(修改后的代码集).

在Chrome中,展开框的向上/向下方向由视口中的滚动位置控制,而不是布局本身.

Chrome采用独特的方法处理此行为,以改善用户体验.

基本上,它们将DOM元素绑定到当前滚动位置.该特定("锚")元素在屏幕上的移动将确定对滚动位置的调整(如果有的话).

他们称这种方法为"Scroll Anchoring".该页面解释了该算法:https: //github.com/WICG/ScrollAnchoring/blob/master/explainer.md

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

根据Scroll Anchoring文档,应用于overflow-anchor: none相应的元素将禁用滚动锚定调整.

更多信息:

• https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md
• https://bugs.chromium.org/p/chromium/issues/detail?id=739860