Исправлено позиционирование div внутри относительного позиционирования div, вызывающее странное поведение при прокрутке в мобильном Safari - PullRequest
Новая
       7

Исправлено позиционирование div внутри относительного позиционирования div, вызывающее странное поведение при прокрутке в мобильном Safari

3 голосов
/ 13 февраля 2020

Когда я размещаю фиксированный div внутри относительного div и выравниваю фиксированный div с нижней частью видового экрана, затем пытаюсь прокрутить нижнюю часть в мобильном Safari (iOS 13), я получаю странный эффект. Похоже, что div становится затемненным белым прямоугольником. Есть ли способ предотвратить такое поведение без изменения position внешнего или внутреннего div'ов?

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>

1 Ответ

1 голос
/ 19 февраля 2020

Содержимое .inner выходит за границы оболочки .outer. Вам нужно установить overflow на visible на родительском элементе .outer, чтобы сделать его содержимое видимым вне его относительного родительского элемента.

См. Результат: https://codepen.io/romainpetit/pen/BaNLaZr

Проверено. 

.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;
}
...