title: overflow-y hides page contents in a webkit browsers (Chrome and Safari)
body: <p>I am currently making our website to be supported by all major browsers and I've met a very strange problem - oveflow-y attribute caused my data to be hidden. Below I've got an oversimplified code sample that works in IE and Firfox, but which doesn't work in Safari and Chrome. This is a 100% valid code and I am not sure why it doesn't display properly in webkit browsers. </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body style="height: 100%;"&gt;
  
  &lt;form action="Webkit_Problem.html" style="height: 100%;"&gt;
  &lt;table style="height: 100%;"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div style="overflow-y: auto; height: 100%;"&gt;
                  THIS SHOULD BE VISIBLE
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://www.alocet.com/VictorsTestFolder/Webkit_Problem.html" rel="nofollow">http://www.alocet.com/VictorsTestFolder/Webkit_Problem.html</a> (Live sample here)</p>
  
  <p>The only way to get it working is either remove the height:100% attributes for div or a table tag (which will ruin the purpose of my html), or add height:100% to html tag</p>
  
  <p>Does anyone has any suggestions? </p>
  
  <p>Thank you</p>