Open
Bug 293045
Opened 20 years ago
Updated 2 years ago
[quirks] DIV with CSS overflow:auto isn't honored on browser resize
Categories
(Core :: Layout, defect)
Tracking
()
NEW
People
(Reporter: terry, Unassigned)
Details
(Keywords: testcase, Whiteboard: [reflow-refactor] DUPEME)
Attachments
(1 file, 2 obsolete files)
|
191 bytes,
text/html
|
Details |
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.7) Gecko/20050414 Firefox/1.0.3
Use the following html file:
<html>
<body>
<div style="height: 90%;">
<button onclick="resetInnerBlock()">Reset</button>
<button onclick="injectInnerBlock()">Inject</button>
<div style="height: 100%;">
<table border=0 style="width:100%; height:100%;">
<col style="width:60%; height: 100%;">
<col style="width:25%; height: 100%; background-color: blue;">
<tr height=100%>
<td style="height: 100%;">
<table border=1 border=0 cellspacing=0 cellpadding=0
style="width:100%; height:100%;">
<tr>
<td>
<span style="margin-left:5;vertical-align:3">Top
Area</span>
<tr>
<td style="height: 90%; padding:0 0 0 10;background-
color:red;">
<div id=divElem style="overflow: auto; height:
100%;"></div>
<tr>
<td>
<div style="padding:5 10 0 10">
<div>Bottom Area</div>
</div>
</table>
<td valign=top align=left>
</table>
</div>
</div>
<script>
var agt = navigator.userAgent.toLowerCase();
var is_ie = (agt.indexOf("msie") != -1) && document.all;
function injectInnerBlock() {
var tmp = document.createElement("div");
tmp.innerHTML = "<span><span>test</span><br><span>";
var elem = document.getElementById("divElem");
elem.appendChild(tmp.firstChild);
}
function resetInnerBlock() {
var elem = document.getElementById("divElem");
elem.innerHTML = "";
}
</script>
</body>
</html>
Reproducible: Always
Steps to Reproduce:
Run this in either IE or Firefox. Press the inject button a few times (4-5
times).
Now resize the browser window under IE you'll notice that when the height of
the div (red block) is less than the number of lines in the red block the CSS
overflow:auto is honored and a scrollbar appears. Under Firefox a scrollbar
never appears and the red block can't be sized to anything less than the
number of lines in the div.
Resize the red block to make the height the smallest it can be in Firefox.
Then press the inject button a few more times the overflow is now honored but
a browser window resize causes the div to grow to it's max size (# of lines in
the div) w/o a scrollbar.
Expected Results:
Should match IE's behavior which makes the most sense.
|
||
Comment 1•20 years ago
|
||
|
|
||
Comment 2•20 years ago
|
||
Attachment #182707 -
Attachment is obsolete: true
|
||
Comment 3•20 years ago
|
||
(In reply to comment #1) Why is everything 100% height ? even elements (like <table>) that do NOT have a height property have height defined. a valid testcase would be usefull
|
||
Updated•20 years ago
|
Component: General → Layout
Keywords: testcase
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → 1.0 Branch
|
|
||
Comment 4•20 years ago
|
||
I didnt see any red in either Firefox nor IE. Can you please attach a minimzed testcase showing this issue please: https://bugzilla.mozilla.org/attachment.cgi?bugid=293045&action=enter
|
||
Comment 5•20 years ago
|
||
Any chance this bug might be fixed for Gecko 1.8 ?
Status: UNCONFIRMED → NEW
Ever confirmed: true
|
|
||
Comment 6•20 years ago
|
||
(I may have rushed to judgement marking this bug as Confirmed -- sorry about that)
|
||
Comment 7•20 years ago
|
||
We have existing bugs on this (overflow:auto blocks inside table cells, and the interactions between tables caching things and the block content changing).
Whiteboard: [reflow-refactor] DUPEME
Related to bug 257123?
|
||
Comment 9•17 years ago
|
||
nominating as we've been getting feedback from webapp devs that this is a common issue for them.
Flags: blocking1.9?
|
|
||
Comment 10•17 years ago
|
||
Note that at this point our behavior is completely consistent (but opposite from IE): if you start with a small window size and start adding elements to the div, things will expand instead of overflowing.
|
||
Comment 11•17 years ago
|
||
Ugh, it would be nice if webapp devs were using standards mode by now... then this sort of crap would be universally broken, so it wouldn't be an issue. Note that there is a relatively easy workaround: stop depending on quirk percentage height calculation. If you set a percentage height all the way up the chain (on the table, the tbody, the tr, the td, and the overflow:auto div), it works exactly how you'd expect it to work. (Note that this workaround works both in quirks and in standards mode.)
Summary: DIV with CSS overflow:auto isn't honored on browser resize → [quirks] DIV with CSS overflow:auto isn't honored on browser resize
Could somebody actually explain what the bug is? Maybe answer comment 4? And maybe give some actual vs. expected results? I don't know what "not honored" means.
|
|
||
Comment 13•17 years ago
|
||
This version should be simple enough to understand, I think. Essentially we're not honoring the quirk percentage height for overflow:auto divs. Fixing this is messy, though, because we can't honor that height all the time; if we did, it would likely break a lot more sites that depend on the current IE-compatible behavior in the non-overflow-auto case. This sort of stuff is why quirks mode sucks.
Attachment #182709 -
Attachment is obsolete: true
Flags: blocking1.9? → blocking1.9-
Minusing 1.9 nomination. How sure are we that this is the bug "webapp devs" were complaining about?
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•