Databases
StackOverflow2013
Postsdbo
POWebKit Rendering Issue when using overflow: hidden;
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWebKit Rendering Issue when using overflow: hidden;
    text
    copied!<p>I've run into what seems to be a rendering issue in webkit when using <em>overflow: hidden;</em> on a child div and then increasing the height of a parent div using javascript. I've boiled my issue down to the following sample code.</p> <p>Create a page from this source and then render in a WebKit browser (Safari, Chrome). Click on the "Expand" button and you will see that the divs that have <em>overflow: hidden;</em> set and should now be displayed based on the expanded parent div height don't show up. In Gecko (Firefox) and Trident (ID) browsers this works fine. </p> <p>Any ideas or suggestions for work arounds? Basically, I want to hand build a table of divs that contain text within a parent div and I don't want the text to wrap or extend beyond the div boundaries. I need to be able to adjust the height of the parent div based on other things happening on the page. </p> <p>Thanks! Bart</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" xml:lang="en" lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-type" content="text/html; charset=UTF-8" /&gt; &lt;meta http-equiv="Content-Language" content="en-us" /&gt; &lt;style type="text/css"&gt; #test_container { width: 540px; } .column_allow_overflow { float: left; width: 100px; height: 16px; margin-left: 4px; padding: 3px; } .column_no_overflow { float: left; width: 100px; height: 16px; margin-left: 4px; padding: 3px; overflow: hidden; } .background { background-color: #444444; color: #e5e5e5; } .data_row { height: 22px; width: 100%; padding-bottom: 22px; background-color: #cccccc; } #expand_container { overflow:scroll; overflow-x: hidden; -ms-overflow-x: hidden; height: 100px; width: 100%; background-color: #cccccc; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="test_container"&gt; &lt;div class="data_row background"&gt; &lt;button type="button" id="expand_button" onclick="expand();"&gt;Expand&lt;/button&gt; &lt;/div&gt; &lt;div id="expand_container"&gt; &lt;div class="data_row background"&gt; &lt;div class="column_allow_overflow background"&gt; Overflow allowed &lt;/div&gt; &lt;div class="column_no_overflow background"&gt; Overflow NOT allowed &lt;/div&gt; &lt;div class="column_allow_overflow background"&gt; Overflow allowed &lt;/div&gt; &lt;div class="column_no_overflow background"&gt; Overflow NOT allowed &lt;/div&gt; &lt;/div&gt; &lt;div class="data_row background"&gt; &lt;div class="column_allow_overflow background"&gt; Overflow allowed &lt;/div&gt; &lt;div class="column_no_overflow background"&gt; Overflow NOT allowed &lt;/div&gt; &lt;div class="column_allow_overflow background"&gt; Overflow allowed &lt;/div&gt; &lt;div class="column_no_overflow background"&gt; Overflow NOT allowed &lt;/div&gt; &lt;/div&gt; &lt;div class="data_row background"&gt; &lt;div class="column_allow_overflow background"&gt; Overflow allowed &lt;/div&gt; &lt;div class="column_no_overflow background"&gt; Overflow NOT allowed &lt;/div&gt; &lt;div class="column_allow_overflow background"&gt; Overflow allowed &lt;/div&gt; &lt;div class="column_no_overflow background"&gt; Overflow NOT allowed &lt;/div&gt; &lt;/div&gt; &lt;div class="data_row background"&gt; &lt;div class="column_allow_overflow background"&gt; Overflow allowed &lt;/div&gt; &lt;div class="column_no_overflow background"&gt; Overflow NOT allowed &lt;/div&gt; &lt;div class="column_allow_overflow background"&gt; Overflow allowed &lt;/div&gt; &lt;div class="column_no_overflow background"&gt; Overflow NOT allowed &lt;/div&gt; &lt;/div&gt; &lt;div class="data_row background"&gt; &lt;div class="column_allow_overflow background"&gt; Overflow allowed &lt;/div&gt; &lt;div class="column_no_overflow background"&gt; Overflow NOT allowed &lt;/div&gt; &lt;div class="column_allow_overflow background"&gt; Overflow allowed &lt;/div&gt; &lt;div class="column_no_overflow background"&gt; Overflow NOT allowed &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; var expand = function (e) { var button = document.getElementById('expand_button'); var expand_container = document.getElementById('expand_container'); button.onclick = contract; expand_container.style.height = '160px'; button.innerHTML = "Contract"; }; var contract = function (e) { var button = document.getElementById('expand_button'); var expand_container = document.getElementById('expand_container'); button.onclick = expand; expand_container.style.height = '100px'; button.innerHTML = "Expand"; }; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload