title: Scrolling issues with mobile safari browser
body: <p>I've run into a weird error with the Safari browser on the iPad. </p>
  
  <p>Here's my code: </p>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#searchResults {
      border-style: none;
      background-color:#b00000;
      width:40%;    
      max-height:100%;    
      position:fixed;    
      left:40%;    
      overflow:hidden;    
      -webkit-overflow-scrolling:touch;    
      visibility:hidden;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button onClick = "buttonClick()"/&gt;
  &lt;div id="searchResults"&gt;
      hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;hello&lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function buttonClick() {
      document.getElementById('searchResults').style.visibility = "visible";
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>​​<a href="http://jsfiddle.net/sXj9m/58/" rel="nofollow">see Fiddle</a></p>