Z-index is handled differently on iOS when setting -webkit-overflow-scrolling: touch

Question

I see some interesting z-index behavior in iOS.

My sample code can be found here: https://jsfiddle.net/59mo8s16/4/

I need to #sidebarbe displayed before #slide-in-tip. This is observed when viewing in Chrome (PC and Android) and Firefox (PC). However, in iOS, Safari and Chrome #sidebarappear before #slide-in-tip.

I realized that removing -webkit-overflow-scrolling: touchfrom CSS makes it visible as a destination for all platforms / browsers. However, I need this to provide momentum scroll for #containerdiv on iOS. Without it, you will get this scroll that stops as soon as you stop scrolling, which creates a terrible user experience.

Any ideas on how to solve this problem? Ideally, I would like to use only a CSS solution. Any significant restructuring of HTML will cause me serious pain at this point. The sample is a truly remote version of an already completed website.

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>

Run code

Answer 1

The documentation offers an explanation of the behavior you see:

touch
Scrolling in the native style. Specifying this style affects the creation of a stacking context (for example, opacity, masks, and transforms).

, , , , HTML.

, . , , #slide-in-tip #container2 #sidebar #main ( , ). - , , , -, - , , .

CSS, , , #slide-in-tip, left, #sidebar. , padding #sidebar, #sidebar 310px, 370px. , #sidebar , , #slide-in-tip , .