In iOS 13 Safari - position: fixed is not displayed correctly. Has anyone come across?

Question

css

Good afternoon.
I came across an interesting bug that can only be reproduced in Safari in iOS 13.
The essence of the bug is the incorrect arrangement of elements with position: fixed;
For example, there is a layout:

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

In Safari desktop, Chrome, Firefox, Opera, IE, Edge - everything is displayed normally.
Safari on iOS prior to version 13 is also OK, but in Safari on iOS 13+ a div with the .modal_overlay class is displayed on top of the .modal__body while the .modal__body remains clickable.
The interesting thing is that if you set position: absolute; in the styles of the .modal_overlay class; the element is displayed normally.
I can not figure out how to reproduce this bug not on the device and see what causes this behavior. Maybe the browser developers have changed something, added some experimental features.
Has anyone encountered a similar bug and how did you deal with it?