В iOS 13 Safari — position: fixed отображается не корректно. Сталкивался ли кто-то?

Question

[Евгений]

Добрый день.
Столкнулся с интересным багом, который можно воспроизвести только в Safari в iOS 13.

Суть бага заключается в неверном расположении элементов с position: fixed;

Например есть верстка:

<div class="modal">
   <div class="modal__body">
      <div>Содержимое окна</div>
      <input type="text" />
   </div>
   <div class="modal_overlay"></div>
</div>

.modal {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 48px 0;
        overflow: auto;
	z-index: 10;
}

.modal__body {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: auto;
    background: #fff;
    z-index: 11;
    max-width: 520px;
}

.modal_overlay {
   position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .4);
    z-index:  10;
    cursor: pointer;
}

В Safari desktop, Chrome, Firefox, Opera, IE, Edge - все отображается нормально.
Safari на iOS до версии 13 так же все Ok, но в Safari на iOS 13+ div с классом .modal_overlay отображается поверх .modal__body при этом .modal__body остается кликабельным.

Интересно то, что если в стилях класса .modal_overlay задать position: absolute; элемент отображается нормально.

Не могу понять как воспроизвести этот баг не на устройстве и посмотреть что вызывает такое поведение. Может разработчики браузера что-то изменили, какие-то экспериментальные функции добавили.

Сталкивался ли кто-то с подобным багом и как вы с ним боролись?

Comments

[Aetae]

Какие-то экспериментальные функции баги добавили.