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

Posted 2023-03-05

【中文标题】显示 flex 在 Chrome 和 Safari 中的行为不同

【英文标题】：Display flex acting differently in Chrome and 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"   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 来解决此问题，同时您还可以切换页眉边距。目标是为了简单起见避免这种情况，还是会起作用？

【参考方案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 的新高度。