Question

获取此标记，将其粘贴到html文件中，然后在iPad上的移动Safari中查看。我在iOS 9.3.2上使用的是iPad Mini 4。

<html lang="en">
<head>
    <title>long</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">

</head>
<body style="background-color: #112FCB">  
    <div id="viewport" style="height: 928px; width: 768px; margin-top: 0px; display: block;">
        <div style="width: 638.3376623376623px; height: 771.3246753246754px; transform: scale(1.203125, 1.203125); background-position-x: 0px;">
            <div class="page-container" style="width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: relative;">
                <div class="page-scroll" style="height: 10202px; width: 640px; left: 0px; top: 0px;">
                    <div style="position: absolute; left: 254px; top: 259px; width: 88px; height: 89px; display: block; background-color: rgb(255, 255, 255);">
                        <span style="top:-3px;left:0px;">1</span>
                    </div>
                    <div style="position: absolute; left: 252px; top: 1098px; width: 113px; height: 60px; display: block; overflow: visible; background-color: rgb(255, 255, 255);">`
                        <span style="top:-3px;left:0px;">2</span>
                    </div>
                    <div style="position: absolute; left: 229px; top: 1821px; width: 88px; height: 89px; display: block; overflow: visible; background-color: rgb(255, 255, 255);">
                        <span style="top:-3px;left:0px;">3</span>
                    </div>
                    <div style="position: absolute; left: 253px; top: 2503px; width: 88px; height: 89px; display: block; overflow: visible; background-color: rgb(255, 255, 255);">
                        <span style="top:-3px;left:0px;">4</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

所以基本上我们有4个绝对定位的div用于显示你在页面上的位置，在一个非常高的div（.page-scroll）内，它位于一个相对定位的div overflow-y: scroll和{{1 （-webkit-overflow-scrolling: touch）。其他父div（.page-container和page-viewport）用于确保设备之间的一致外观。

在我们尝试过的每个其他设备上，滑动滚动页面容器div中的页面滚动div按预期滚动。但是，在iPad上，我们看到的是非确定性行为。如果您快速滑动，页面会正常滚动，但如果您慢慢滑动，页面有时会出现橡皮筋。好像viewport事件被发送到其中一个父div，因此iPad认为它位于页面的底部或顶部。

然而！如果从touchstart div中删除-webkit-overflow-scrolling: touch，问题就会消失。但你失去了动力滚动，这很糟糕。我还应该注意，如果通过iframe将此标记加载到页面上，问题就会消失，但这对我们来说并不是一个选择（因为原因）。

我已经尝试了this similar question中的建议，将另一个div置于.page-container并设置.page-scroll，但这并没有修复该错误。

我确实看到很多相关的问题表明height: calc(100% + 1px)有很多问题，但我认为这些问题都不是这个问题。

之前有没有遇到过这个？有关解决方法的任何建议吗？

iPad有时带有-webkit-overflow-scrolling橡皮筋：触摸

0 个答案: