Search code examples
htmlcsssafaricross-browser

Div with position: fixed not displaying inside div with position: absolute in Safari

I have a fixed position div inside an absolutely positioned div. In Chrome and Firefox the inner div is displayed, but in OSX Safari 10, it is not.

JSFiddle

.outer {
  margin-top: 21px;
  position: absolute;
  background: red;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  max-height: 100vh;
}

.inner {
  display: inline;
  overflow: hidden;
  position: fixed;
  background-color: blue;
  max-width: 100vw;
}
<div class="outer">
  <p>Inner Div</p>
  <div class="inner">
    <p>Outer Div</p>
  </div>
</div>

In the fiddle, changing the outer div's position property to either static or sticky means that the inner div is displayed. But these position's aren't suitable for my situation.

Is there a way to get the inner div to display in Safari without changing the divs' positions?

Solution

  • Just before submitting this question I came across the answer. Having written the whole thing out though, I'm posting it in case some other poor soul has the same problem:

    The simple solution is to remove the z-index: 1; rule on the parent div. It doesn't make any difference in Chrome, FireFox, or any mobile browsers I tested, but it makes all the difference in Safari.

    NOTE: Above is the answer which was posted by the Question Author in the question itself, just copy and pasting here so it can easily get visible for other users.