Scrolling issues with mobile safari browser

Question

I've run into a weird error with the Safari browser on the iPad.

Here's my code:

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";
}

The popup div container is not able to be scrolled in mobile Safari, but if I eliminate the visiblity:hidden part then it scrolls just fine. I really can't eliminate the visibility:hidden part, but I'm not sure what to do. I could dynamically create the div on the fly and then remove it when I'm done with it, but it seems that there should be an easier method.

​​see Fiddle

Answer 1

Try using display: none; (hidden) and display: block; (visible) instead.

I don't know why that fixes it but it seems to do the trick.