Scrollable elements fall in ios11

Question

Scrollable elements fall in ios11

I have an application that shows / hides content dynamically, and I am facing a very strange problem in iOS 11 and xCode 9 when using full screen mode for my application (new meta tag viewport-fit=cover). The problem is that when there is a scrollable element and a click is made somewhere, there is an attached click event element, the scroll elements fall with the size safe-inset, remaining in a negative position and disrupting the application.

There is an image with a problem:

, (, ), . , , ( ), (preventDefault(); stopPropagation(); stopImmediatePropagation()), .

cordova (<preference name="DisallowOverscroll" value="true" />) index.html:

<html>
    <head>
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
        <title>iostest</title>
        <style>
            header {
                background-color: blue;
                color: white;
                height: 80px;
                left: 0;
                position: fixed;
                right: 0;
                top: 0;
                z-index: 2;
            }

            .container {
                bottom: 0;
                left: 0;
                overflow: hidden;
                position: absolute;
                right: 0;
                top: 0;
            }

            .page-content {
                background-color: yellowgreen;
                box-sizing: border-box;
                padding-top: 80px;
                -webkit-overflow-scrolling: touch;
                overflow-y: scroll;
                overflow-x: hidden;
                height: 100%;
            }

            .big-paragraph {
                background: grey;
                height: 1000px;
                margin: 0 50px;
            }

            .abs-elem, .fix-elem {
                background-color: red;
                position:absolute;
                bottom: 0;
                left: 0;
                width: 50px;
                height: 50px;
            }
            .fix-elem {
                background-color: green;
                right: 0;
                left: initial;
            }
        </style>
    </head>
    <body>
        <header></header>
        <div class="container">
            <div class="page-content" style="display: none">
                <p class="big-paragraph">Big paragraph</p>
            </div>
        </div>
        <div class="abs-elem"></div>
        <div class="fix-elem"></div>
        <script>
            let p = document.querySelector('p');
            let page = document.querySelector('.page-content');
            document.querySelector('header').addEventListener('click', function() {});
            document.querySelector('.abs-elem').addEventListener('click', function(evt) {
                evt.preventDefault();
                evt.stopPropagation();
                evt.stopImmediatePropagation();
            });
            document.querySelector('.fix-elem').addEventListener('click', function() {
                page.style.display = 'none';
                page.offsetWidth;
                page.style.display = 'block';
            });
            setTimeout( () => {
                document.querySelector('.page-content').style.display = 'block';
            }, 200);
        </script>
    </body>
</html>