html - 设置 -webkit-overflow-scrolling : touch 时，z-index 在 iOS 上的处理方式不同

Question

我在 iOS 上看到一些有趣的 z-index 行为。

我的示例代码可以在这里查看:https://jsfiddle.net/59mo8s16/4/

我需要将 #sidebar 显示在 #slide-in-tip 的前面。在 Chrome(PC 和 Android)和 Firefox(PC)上查看时就是这种情况。但是，在 iOS Safari 和 Chrome 上，#slide-in-tip 出现在 #sidebar 的前面。

我意识到从 CSS 中删除 -webkit-overflow-scrolling: touch 会使其在所有平台/浏览器中都按预期显示。但是，我需要它来为 iOS 上的 #container div 提供动量滚动。如果没有它，您会在停止滑动时立即停止滚动，这会带来糟糕的用户体验。

关于如何解决这个问题的任何想法？理想情况下，我想要一个纯 CSS 解决方案。在这一点上，对 HTML 的任何重大重组都会给我带来一些巨大的痛苦。该示例是一个已经完成的网站的真正精简版。

HTML:

html,
body {
  height: 100%;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

#top-bar {
  top: 0;
  width: 100%;
  z-index: 200;
  background-color: green;
  height: 85px;
  position: absolute;
}

#sidebar {
  float: left;
  padding: 30px;
  background-color: pink;
  position: fixed;
  width: 310px;
  left: 0px;
  z-index: 150;
  top: 85px;
  bottom: 0px;
  padding: 0;
  padding-bottom: 50px;
}

#container2 {
  min-height: 100%;
}

#main {
  padding-right: 20px;
  height: 100%;
  margin: 0;
  margin-left: 10%;
  line-height: 40px;
  text-align: right;
}

#container {
  height: 100%;
  margin: 0;
  position: absolute;
  width: 100%;
  overflow-y: scroll;
}

#container2 {
  padding-top: 75px;
}

#slide-in-tip {
  position: fixed;
  bottom: 0;
  text-align: right;
  width: 100%;
  z-index: 140;
  background-color: blue;
  height: 200px;
}

<div id="top-bar">
  top-bar
</div>
<div id="container">
  <div id="container2">
    <div id="sidebar">
      sidebar
    </div>
    <div id="main">
      long content - see js fiddle for actual long content
    </div>
  </div>
</div>
<div id="slide-in-tip">
  slide-in-tip
</div>

Answer 1

documentation为您所看到的行为提供解释:

touch
Native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms).

由于在创建堆叠上下文后无法销毁堆叠上下文，因此堆叠上下文外部的元素无法与该堆叠上下文中的元素直接交互，并且您不能在不物理移动元素的情况下在堆叠上下文之间移动元素，因此您将无法无需重构物理 HTML 即可解决堆叠问题。

话虽如此，您不必对结构进行重大更改。您可以做的最好的事情就是将 #slide-in-tip 作为 #sidebar 和 #main 的同级移动到 #container2 中 (你放在哪里并不重要，只要它们都是 sibling 即可)。但是，无论出于何种原因，这似乎会导致模拟器中的滚动条出现严重的闪烁 — 我没有物理设备来对此进行测试，因此您需要对其进行彻底测试。

我可以提供的唯一基于 CSS 的解决方法是通过给它一个等于 宽度的 left 偏移来缩短你的 #slide-in-tip #sidebar。请注意，您在 #sidebar 规则中有冲突的 padding 声明，因此 #sidebar 的宽度实际上是 310px，而不是 370px。不幸的是，如果 #sidebar 的部分是透明的，并且您希望通过这些透明部分看到 #slide-in-tip，这也不是一个选项。