javascript - 移动版 Safari 浏览器的滚动问题

Question

我在 iPad 上使用 Safari 浏览器时遇到了一个奇怪的错误。

这是我的代码:

CSS:

#searchResults {
    border-style: none;
    background-color:#b00000;
    width:40%;    
    max-height:100%;    
    position:fixed;    
    left:40%;    
    overflow:hidden;    
    -webkit-overflow-scrolling:touch;    
    visibility:hidden;
}

HTML:

<button onClick = "buttonClick()"/>
<div id="searchResults">
    hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>
</div>

JS:

function buttonClick() {
    document.getElementById('searchResults').style.visibility = "visible";
}

弹出式 div 容器无法在移动版 Safari 中滚动，但如果我消除可见性:隐藏部分，它就可以正常滚动。我真的无法消除 visibility:hidden 部分，但我不确定该怎么做。我可以即时动态创建 div，然后在完成后将其删除，但似乎应该有更简单的方法。

see Fiddle

Answer 1

尝试使用 display: none;(隐藏)和 display: block;(可见)。

我不知道为什么会修复它，但它似乎可以解决问题。