移动 Safari 滚动 Div 在新页面上闪烁答案

【问题标题】：Mobile Safari Scrolling Div flickers on new page移动 Safari 滚动 Div 在新页面上闪烁
【发布时间】：2014-01-07 12:11:50
【问题描述】：

我有一个包含在可滚动 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>

我也尝试链接到不同的页面并获得相同的结果。实验只是链接了相同的页面。

【问题讨论】：

标签： html css mobile-safari

【解决方案1】：

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

【讨论】：