移动safari浏览器的滚动问题

我在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中滚动，但如果我消除了visiblity:hidden部分，它就会滚动得很好。我真的无法消除可见性：隐藏部分，但我不知道该怎么办。我可以动态创建div，然后在完成后将其删除，但似乎应该有一个更简单的方法。

​​请参阅Fiddle