html - Mobile Safari Scrolling Div 在新页面上闪烁

Question

我有一个包含在可滚动的 div 中的表格。当我点击一个链接时，div 会随着新页面的加载而闪烁。其余页面不会闪烁。如果我删除 -webkit-overflow-scrolling: touch;在 CSS 之外，闪烁问题消失了。我喜欢触摸滚动的感觉，想保留它。

这是我为 div 使用的 CSS

.navWrapper {
position: absolute;
left: 0;
top: 194px;
height: 430px;
-webkit-overflow-scrolling: touch;
width:1024px;
overflow-y: scroll;
}

这是一个div的实验

<div class="navWrapper">
    <table>
        <tr>
            <td><a href="page.html"><img src="../images/thumb01a.png" width="72" height="72" alt=""></a></td>
        </tr>
        <tr>
            <td><a href="page.html"><img src="../images/thumb01a.png" width="72" height="72" alt=""></a></td>
        </tr>
        <tr>
            <td><a href="page.html"><img src="../images/thumb01a.png" width="72" height="72" alt=""></a></td>
        </tr>
        <tr>
            <td><a href="page.html"><img src="../images/thumb01a.png" width="72" height="72" alt=""></a></td>
        </tr>
        <tr>
            <td><a href="page.html"><img src="../images/thumb01a.png" width="72" height="72" alt=""></a></td>
        </tr>
        <tr>
            <td><a href="page.html"><img src="../images/thumb01a.png" width="72" height="72" alt=""></a></td>
        </tr>
        <tr>
            <td><a href="page.html"><img src="../images/thumb01a.png" width="72" height="72" alt=""></a></td>
        </tr>
        <tr>
            <td><a href="page.html"><img src="../images/thumb01a.png" width="72" height="72" alt=""></a></td>
        </tr>
        <tr>
            <td><a href="page.html"><img src="../images/thumb01a.png" width="72" height="72" alt=""></a></td>
        </tr>
        <tr>
            <td><a href="page.html"><img src="../images/thumb01a.png" width="72" height="72" alt=""></a></td>
        </tr>
        <tr>
            <td><a href="page.html"><img src="../images/thumb01a.png" width="72" height="72" alt=""></a></td>
        </tr>
        <tr>
            <td><a href="page.html"><img src="../images/thumb01a.png" width="72" height="72" alt=""></a></td>
        </tr>
        <tr>
            <td><a href="page.html"><img src="../images/thumb01a.png" width="72" height="72" alt=""></a></td>
        </tr>

   </table>

</div>

我也试过链接到不同的页面并得到相同的结果。该实验仅链接了相同的页面。

Answer 1

尝试将 -webkit-backface-visibility: hidden 添加到 .navWrapper。