CODEWITHSUNDEEP
htmlcsssafaricross-browser
Runny Yolk
Runny Yolk

Reputation: 1164

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?

Upvotes: 12

Views: 7915

Answers (2)

Shane McCurdy
Shane McCurdy

Reputation: 2218

I just figured this out for my case of experiencing this. A position: fixed and z-index: 101 parent container had overflow-y: auto on it to allow for vertical scrolling when the content was expanded without overflowing the the view height. By switching that back to overflow: initial it allowed the absolute child to show properly. In my case the child was there and clickable, but just totally invisible like it had opacity: 0, but it certainly did not. So this looks like an issue with the combination of overflow and z-index on parents elements with z-index on their child elements.

UPDATE: yep, a know issue

Upvotes: 0

Sami Ahmed Siddiqui
Sami Ahmed Siddiqui

Reputation: 2386

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.

Upvotes: 19

Related Questions