Question

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

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

<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我会在单击按钮时调整margin-top元素的header（对于此示例）。

问题：虽然Chrome按预期工作，但Safari却没有。我怀疑这必须归功于Safari的webkit版本如何使用display: flex解释元素。 编辑：或者可能是由于Safari如何与vh单位合作？

在Chrome中，标题会上下滑动，而不会影响<svg>元素。在Safari中，调整标题的margin-top会导致svg元素在屏幕底部创建的空格等于header的{{1}}中的变化。< / p>

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

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

_{旁注：firefox也按预期工作}

Answer 1

代替对看似错误的真正修复，一个简单的解决方法是在切换标题位置时切换main的高度。基本上，似乎Safari正在向上移动main向上移动标题，因此我们只是让它更高，以便再次向下延伸到屏幕的底部。

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

虽然我最初建议在minimum-height上切换main，但我注意到，即使我们添加了最小高度变化并未完全过渡，我们也会遇到一个丑陋的错误一个匹配的过渡属性，在屏幕底部留下一个白色间隙一瞬间。因此，我们可以为实际的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的新高度。

在Chrome和Safari中，展示展示的动态不同

1 个答案: