CODEWITHSUNDEEP
cssmobile-safari
Mike Furlender
Mike Furlender

Reputation: 4029

Fixed positioned div inside of relative positioned div causes strange overscroll behavior in mobile Safari

When I position a fixed div inside of a relative div, and align the fixed div to the bottom of the viewport, then attempt to scroll past the bottom in mobile Safari (iOS 13) I get a strange effect. It looks as though the div becomes obscured by a white rectangle. Is there any way to prevent this behavior without changing the position of the outer or inner divs?

enter image description here 

.outer {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  overflow: auto;
  padding: 5px;
}

.inner {
  color: white;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  width: 100%;
  background: blue;
}
<html>

<head>
</head>

<body>
  <div class="outer">
    <div class="inner">
      test test test <br/> test test test
    </div>
  </div>
</body>

</html>

Upvotes: 3

Views: 398

Answers (1)

Romainpetit
Romainpetit

Reputation: 916

The .inner content goes outside the boundaries of the .outer wrapper. You'd need to set overflow to visible on the .outer parent to make its content visible outside of its relative parent.

See the result : https://codepen.io/romainpetit/pen/BaNLaZr

Tested.

.outer {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  overflow: auto;
  padding: 5px;
}

.inner {
  color: white;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  width: 100%;
  background: blue;
}

Upvotes: 1

Related Questions