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

Google Chrome中存在一个问题,即当元素放置在Flexbox容器内时,元素在相对于视口的不同方向上展开/折叠,其中相邻的flex项目具有空格 – 中间对齐内容.

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

我很好奇：

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

更新1：如果可能的话,我已经提交了issue #739860 on chromium bug tracker寻求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,.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,.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>

解决方法

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

> overflow-anchor：无

这将禁用Chrome中称为“滚动锚定”的功能,这会导致框的向上扩展(revised codepen).

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

Chrome会针对此行为采取独特方法,以改善用户体验.

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

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

此行为目前是Chrome独有的,但是Google is pushing for standardization.

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

更多信息：

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