Closed Bug 90861 Opened 23 years ago Closed 23 years ago

CSS: { overflow:auto } - only the background is visible

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Platform:
x86
Windows 98
Type:
defect
Priority:
Not set
Severity:
blocker

Tracking

()

Status:
VERIFIED DUPLICATE of bug 35274

People

(Reporter: founder, Assigned: pierre)

References

(
URL
)

Details

Attachments

(2 files)

Simplified testcase #1 (<body style="overflow: auto;">)
655 bytes, text/html
Details
Simplified testcase #2 (<div style="overflow: auto;">)
687 bytes, text/html
Details 
All DIV with no overflow are rendered in the background color.

When I make in the CSS

BODY { overflow:auto }

I even thought, maybe it's some problem with the
CSS parser in Mozilla 0.92,
So I tested the same with

<BODY id=allbody>

and later in a JavaScript

document.getElementById("allbody").style.overflow="auto"

Result is the same, at Mozilla 0.92 disappears the whole page.



The test page is   http://cgi.pege.org/

You should see:
===========

* Yellow graphic:
      cgi.pege.org
    common gateway interface

*  red buttons
    [contact] [+menu]

*  A search box

*  Text like
    CGI - Common Gateway Interface - server
    You reached the common gateway server.

* A table of contence from http://pege.org

Mozilla 0.92 displays only:
==================
* A table of contence from http://pege.org

on XVGA or larger screens
on SVGA or smaller screens, only a black screen

This is because of the dynamic layout system.
The <DIV id=content> is assigned overflow:auto
at XVGA and larger screens only

When You move the mouse around over the black
area, the mouse pointer changes when You are over
a link.
I see the same behavior on this minimal valid(ated) test-example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>body overflow: auto test</title>
 <style type="text/css">
  body { overflow: auto }
 </style>
</head>
<body>

<p>
 Test text
</p>

</body>
</html>

(online on <http://www.koldfront.dk/mozilla/0.9.2+/body-overflow-auto.html>)

This is on 20010706/Linux (the page is displayed blank; no text). "auto" is the
only of the valid values that exhibits this behaviour on my box.

Ahh: the text _is_ shown if I set width and height for body in css.

A CSS guru will be able to tell whether this is according to spec, or not.

The simple testcase pasted in above displays fine for me.

The main testcase seems incredibly complicated to simplify.  When I remove
'overflow: auto' from the CSS, that doesn't help.  I guess I'll have to pull in
and inline and modify the JS to try to figure out what's going on.
What the CSS spec says about this is the following:

 * The BODY element is not at all special.  It's just a normal block element. 
(The HTML element may be special in some ways since it's the root element, and
the CSS spec does describe some things as different for the root element, but we
can ignore those since we're not talking about the HTML element.)

 * In this testcase, every child of the BODY element is absolutely positioned.

 * CSS2 section 10.3.3 ( http://www.w3.org/TR/REC-CSS2/visudet.html#q17 ) says
that the height of a block-level non-replaced element in the normal flow (which
in this case BODY is) is (since in this case BODY has block-level children) "the
distance from the top border-edge of the topmost block-level child box, to the
bottom border-edge of the bottommost block-level child box. Only children in the
normal flow are taken into account (i.e., floating boxes and absolutely
positioned boxes are ignored, and relatively positioned boxes are considered
without their offset)."  Since this says that absolutely positioned boxes are
ignored, the height of the BODY element is 0.

The definition of the 'auto' value for 'overflow' in section 11.1.1 says "The
behavior of the 'auto' value is user agent-dependent, but should cause a
scrolling mechanism to be provided for overflowing boxes."  Mozilla implements
the 'auto' value by providing scrollbars between the padding and border of the
element.  In this case, however, the element has zero size.  I'm not sure why
you don't see the zero-size scrollbars to scroll a zero-size area.


I suspect the reason this works in IE is that IE doesn't display the HTML
element, so it considers BODY as special and therefore makes it be the height of
the page or something similar.  I'm not sure, though.  What result were you
trying to get by specifying 'overflow: auto'?
I see what's going on.
Div elements are ignoring absolute positioned child elements when determining
their size.
When the parent has overflow:auto set, it clips the child area so that the child
is only visible inside the parent's area.  When overflow:auto isn't set, this
clipping doesn't occur.
You can see this by setting "border: solid thin;" in the parent element.

I notice that when the parent uses absolute positioning as well as the child,
the child is relatively positioned inside the parent.  When the parent div is
normal, and just the child div has absolute positioning, it's not relative to
anything.  If this is the correct behavior (and I think it is), it doesn't make
any sense to expect a non-absolute positioned parent to include absolute
positioned children when determining its size, and this bug is invalid.

http://www.w3.org/TR/REC-CSS2/visuren.html#absolute-positioning

"In the absolute positioning model, a box is explicitly offset with respect to
its containing block."

Does that mean that absolute positioned elements should be placed relative to
their container's position?

Meaning that <div style="position: absolute; left: 50px; top: 20px;"> should
place the div 50 pixels right and 20 pixels down from that top-right corner of
its container rather than the top-right corner of the document.

If so, that is the real problem.

> "In the absolute positioning model, a box is explicitly offset with respect to
> its containing block."

The containing block is the first ancestor which is absolutely or relatively
positioned, not just any parent box.

I think burpmaster is right.  body with overflow:auto will clip positioned
content if it's outside of the size set for body.  This is correct.  In this
case the body is very small, and so no scrollbars show (bug #?).

The rest of the layout looks correct.  I'm tempted to mark this invalid, but
over to style system.
Assignee: jst → pierre
Component: DOM HTML → Style System
Keywords: qawanted
QA Contact: stummala → ian
Looking at the original page, and examining further, there still exists a bug. 
It appears that we are (correctly) clipping down the body element to zero size,
so that the absolutely positioned divs do not appear.  However, when examining
the page, moving the cursor around in the blank area to the lift reveals that
links are still functional, and the cursor for "selection" appears-but selection
cannot actually be performed.  It appears that the clipping is malfunctioning;
this is probably also the cause of the non-zero scrollbar.  Confirming: please
change bug summary to reflect this, as well as priority (I haven't the permissions).
Status: UNCONFIRMED → NEW
Ever confirmed: true
OK.  That makes this a duplicate of bug 35274 and friends.

*** This bug has been marked as a duplicate of 35274 ***
Status: NEW → RESOLVED
Closed: 23 years ago
Resolution: --- → DUPLICATE
Status: RESOLVED → VERIFIED
Keywords: qawanted
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: