title: iOS 7 Safari can't scroll DIV with overflow: hidden or auto
body: <p>I'm working on a page with four (4) separate DIV elements that all are scrolled independently of each other.  Using the answer here: <a href="https://stackoverflow.com/questions/18736297/webkit-overflow-scrolling-touch-broken-in-ios7#answer-18737266">`-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7</a> I was able to get most of the pages working.  There are still a few pages where the DIV holding the main content cannot be scrolled vertically when a side DIV is expanded.</p>
  
  <p>The page structure looks like this:</p>
  
  <pre><code>...
  &lt;div id="paneTop"&gt;...&lt;/div&gt;
  &lt;div id="paneLeft" class="expanded"&gt;...&lt;/div&gt;
  &lt;div id="paneCenter"&gt;
    &lt;div&gt;
      &lt;div style="overflow: hidden;"&gt;
        &lt;div id="mainContent" style="overflow: auto;"&gt;...&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="paneRight" class="expanded"&gt;...&lt;/div&gt;
  ...
  </code></pre>
  
  <p>Setting the touchstart event listener on #paneCenter worked for most of the pages but those didn't have the extra layer of divs.  I have tried setting the touchstart event listener on #mainContent and all the way up the chain but #mainContent will not scroll when #paneLeft is expanded even though it works when #paneLeft is collapsed and it works whether paneRight is expanded or not.</p>
  
  <p>Note: this issue has only been identified on an iPad running iOS7.</p>