5

似乎在 iPhone 6+ 和 iPad 3 上（到目前为止我测试过的设备会重现问题）在页面放大时滚动 div 存在问题。

首次加载具有以下基本内容的页面时，div 滚动没有问题。

再生产

  • 稍微放大页面以使比例大于 1.0。这似乎通常会完全或大部分“禁用” div 的滚动。页面本身滚动或“反弹”。
  • 缩小到 1.0 比例并再次滚动。

这个问题可能有点不一致，有时在放大和触摸/移动/缩放滚动页面时会起作用但不可靠。只有缩小似乎会重置它，以便可以一致地滚动 div 而不会出现问题。

这似乎无法在 iPhone 6+、iPad 3、iPhone 4（Chrome 和 Safari）以及几款 Android 手机 (Chrome) 上的 Chrome 上重现。

有人遇到这个问题和/或知道如何解决吗？还是我错过了什么？

任何信息或帮助表示赞赏。

#outer {
        border: 1px solid #000;
        width: 100px;
        height: 100px;
        overflow: auto;
        /*
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        */
    }

    #inner {
        width: 100px;
        background-color: cornflowerblue;
    }

    p { margin: 0; }
<div id="outer">
        <div id="inner">
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
    </div>

4

0 回答 0