Question

我有一个应用程序显示/隐藏内容，并且我在iOS 11和xCode 9中面临一个非常奇怪的问题，当我的应用程序使用全屏时（新的viewport-fit=cover元）。问题在于，当存在可滚动元素，并且在某处附加了点击事件监听器时，滚动元素会降低safe-inset大小，保持在负位置并破坏应用程序。

有一个问题的图片：

一方面，如果在没有事件监听器的区域（例如，灰色或软绿色区域）中进行单击，则不会中断视图。另一方面，监听器内部的逻辑并不重要，即使监听器没有做任何事情（蓝色标题），或者如果它阻止了代码（preventDefault(); stopPropagation(); stopImmediatePropagation()），它也会破坏视图

要重现此问题，只需要一个新的cordova项目，禁用过度滚动（<preference name="DisallowOverscroll" value="true" />）并使用以下index.html：

＆＃13;

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

＆＃13;

我已经放了三个可点击区域，标题（只是一个监听器），红色方块（左下角，带有防止代码）和绿色方块（右下角，隐藏/显示内容，用于显示之后）这一切都再次出现在他们的位置。）

因此，我已在cordova jira

中发布了此问题

更新：我已经用apple打开了一个错误报告，因为它似乎是UIWebView组件的问题，而不是与网络代码相关的问题

更新2 ：它已在apple bugreporting工具中标记为重复，因此它似乎是Apple webview中的一个已知问题。我想我不会得到苹果的任何答案，因为我的报告是重复的，只是希望在将来的版本中修复它。

更新3（2017年10月17日）：仍然存在于iOS 11.0.3

中

更新4（11/01/2018）：似乎在上一个iOS（从11.2）/ xCode版本中得到修复。正如预期的那样，Apple在我们的错误报告中没有回答，但最后它似乎已经修复：）

可滚动元素在ios11中

0 个答案: