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

2023年7月8日 392次阅读

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

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

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

我已经意识到删除-webkit-overflow-scrolling：来自CSS的触摸使它在所有平台/浏览器中显示为预期.但是,我需要这个,以便为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>

最佳答案 documentation提供了您所看到的行为的解释：

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

由于您无法在创建堆叠上下文后销毁堆叠上下文,因此堆叠上下文之外的元素无法直接与堆叠上下文中的元素交互,并且您无法在堆叠上下文之间移动元素而无需在物理上移动它们,您将无法解决堆叠问题而不重构您的物理HTML.

话虽如此,您不必对结构进行重大更改.您可以做的最好的事情就是将#slip-in-tip移动到#container2中作为#sidebar和#main的兄弟(只要它们都是兄弟姐妹,你确切地放置它并不重要).无论出于何种原因,这似乎会导致模拟器中的滚动严重闪烁 – 我没有物理设备来测试它,所以你需要彻底测试它.

我唯一可以提供的基于CSS的解决方法是通过给它一个等于#sidebar宽度的左偏移来缩短你的#slide-in-tip.请注意,您在#sidebar规则中存在冲突的填充声明,使得#sidebar的宽度实际为310px,而不是370px.不幸的是,如果#sidebar的部分是透明的,并且您希望通过这些透明部分看到#slide-in-tip,那么这也不是一个选项.

点赞