显示 flex 在 Chrome 和 Safari 中的行为不同答案

【问题标题】：Display flex acting differently in Chrome and Safari显示 flex 在 Chrome 和 Safari 中的行为不同
【发布时间】：2017-11-27 13:30:43
【问题描述】：

背景： 在我的团队正在开发的工具中，我们正在实现一个header，它基于事件侦听器以编程方式移出屏幕。在编写了第一个实现后，它按预期工作，但仅在 Chrome 中。

我在#wrapper 和#content 元素上使用display:flex。

<div id="wrapper">
  <header>Header Content</header>
   ...
      <section id="content">
        <div id="subcontent">
          <div id="tool">
            <div id="tool-container"></div>
            <svg id="svgTool" height="100%" width="100%" class="svgTool style-scope test-tool"></svg>
          </div>
        </div>
      </section>
   ...
</div>

一些css：

...
#wrapper {
  width:100%;
  height:100vh;
  position:relative;
  display:flex;
  flex-direction:column;
  margin-left:auto;
  margin-right:auto;
  min-height:100%;
}

#content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
...

使用一些简单的 JavaScript，当单击按钮时，我正在调整 header 元素的 margin-top（对于本示例）。

问题：虽然 Chrome 按预期工作，但 Safari 不能。我怀疑这一定是由于 Safari 的 webkit 版本如何使用display: flex 解释元素。 编辑：或者可能是由于 Safari 如何使用 vh 单位？

在 Chrome 中，标题会上下滑动而不影响<svg> 元素。在 Safari 中，调整标题的 margin-top 将导致 svg 元素在屏幕底部创建空白，等于更改 header 的 margin-top。

JSBin： 这个 JSbin 的工作方式与我们工具的当前实现相同。在 Chrome 和 Safari 中打开它以查看差异。

http://jsbin.com/kaxiqig/edit?html,css,output

_{旁注：firefox 也可以正常工作}

【问题讨论】：

您可能正在与github.com/philipwalton/…打交道
当我在 chrome 中点击“测试幻灯片”时，它什么也没做。
@MichaelCoker 你在 jsbin 中启用了“自动运行 js”吗？
@captainrad 就是这样。我不经常使用 jsbin。您也应该在 SO 上的帖子中包含此代码。在这种情况下不需要 jsbin。
FWIW，即使我将所有 vh 单位切换为百分比，我在 Safari 中也看到了同样的问题。所以不确定它与单位有关。也就是说，您可以通过在main 上切换min-height 来解决此问题，同时您还可以切换页眉边距。目标是为了简单起见避免这种情况，还是会起作用？

标签： html css google-chrome safari flexbox

【解决方案1】：

代替对似乎是错误的真正修复，一个简单的解决方法是在切换标题位置的同时切换main 的高度。基本上，Safari 似乎在向上过渡时将main 与标题一起向上拉，因此我们将使其更高，使其再次向下延伸到屏幕底部。

main 的默认高度是calc(100vh - 80px)，所以我们可以只修改 calc 表达式的后半部分来获得我们的新值。修改它的具体方式取决于应用程序中标头的高度。假设在这种情况下，标题通常为 100 像素高。由于标头已转换为 margin-top: -75px，我们只需将 calc 表达式更改为 calc(100vh - 25px) 即可获得新的高度。

虽然我最初建议在 main 上切换 minimum-height，但我注意到这样做时我们也会遇到一个丑陋的错误，即即使我们添加匹配的过渡属性，最小高度变化也不会完全正确过渡，留下屏幕底部有一瞬间的白色间隙。所以我们可以只为实际的height 设置动画，这会产生非常平滑的效果。

在你的 CSS 中，我添加了这一行：

main {
  transition: height .5s;
}

新的滑动函数变为：

function slide() {
  if (document.querySelector('header').style.marginTop !== "-75px") {
    document.querySelector('header').style.transition = ".5s";
    document.querySelector('header').style.marginTop = "-75px";
    document.querySelector('main').style.height = "calc(100vh - 25px)";
  } else {
    document.querySelector('header').style.marginTop = "0";
    document.querySelector('main').style.height = "";
  }
}

如果您的标题要改变高度，您可以切换main 上的类，并修改该类在不同媒体查询中使用的 calc 表达式，或者您可以增强功能以首先找到视口高度然后减去转换后标头高度以找到要应用于main 的新高度。

【讨论】：