Вложенный фиксированный элемент не может быть больше родительского только в iO - PullRequest
Новая
       28

Вложенный фиксированный элемент не может быть больше родительского только в iO

0 голосов
/ 28 августа 2018

Моя проблема возникает только на iOs (как в Safari, так и в Opera), отлично работает в Chrome, Firefox и даже в Opera на Windows и Android.

У меня следующая ситуация: 

<div class="flex-box-parent">
    <div class="group01">
        <div class="fixed-element">
            This element has a position: fixed and z-index: 100
        </div>
    </div>
    <div class="group02">
        On iOS, fixed-element does not cover this part
    </div>
</div>

Мне нужно, чтобы фиксированный элемент отображался над всем остальным на моем веб-сайте, поскольку это модальное изображение с полноэкранным фоном. К сожалению, все содержимое fixed-element больше group01 не отображается.

Ни group01, ни group02 не указано z-index. Он отлично работает на Windows / Android, но на iOS group02 всегда выше.

CSS 

.flex-box-parent{
    position: relative;
    display: flex;
    flex-direction: column;
}
.fixed-element{
    z-index: 100;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

.group01{
    position: relative;
    flex: 1;
    overflow: auto;
}

.group02{
  display: flex;
  flex-direction: column;
  position: relative;
}

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ # 1

В качестве теста я удалил все ссылки на z-index в моем css, кроме fixed-element. Все еще не работает на IO (работает на все остальное)

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ # 2

Кажется, проблема в том, что fixed-element не может выйти за границы своего родителя на iOS. Мне показалось, что group02 выше фиксированного элемента, но на самом деле, fixed-element просто не может перейти в полноэкранный режим, если это означает увеличение больше, чем group01. Я все еще ищу решение этой проблемы.

1 Ответ

0 голосов
/ 28 августа 2018

В html ваш общий тег div не закрыт для класса .fixed-element. Пожалуйста, исправьте это и отметьте

...