Fixed element is overflowed by parent div

I have .parent scrollable element with -webkit-overflow-scrolling: touch css property. Inside this .parent element I have fixed .child element, but it is overflowed by .parent element in IOS devices. This behaviour is caused by -webkit-overflow-scrolling property, but I don't want to delete this property because if I delete, it isn't smooth on many ios devices.

this is code example:

<div class="parent">
    <div class="child"></div>
</div>
<style>
    .parent {
        width: 300px;
        height: 300px;
        overflow: scroll;
    }
    .child {
        position: fixed;
        top: 0;
        left: 0;
        width: 1000px;
        height: 1000px;
        overflow: scroll;
        background-color: red;
    }
</style>

On IOS only child is overflowed and only 300x300 size of red portion is shown. So how can this be fixed so that child element isn't overflowed?