90270 - [FIXr][fixed pos]DIV using CSS fixed positioning appears in wrong place and then "jumps" to proper place on mouseover

Status: RESOLVED FIXED

(Core :: Layout: Positioned, defect, P1)

Description

[Andy Korvemaker]

From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Win95; en-US; rv:0.9.2) Gecko/20010628
BuildID:    2001062815

When this page loads, the navigation box on the top right corner is placed at
the top of the page, rather than down a bit (1.5em) as is specified in the style
sheet (under body:margin-top).

When I move my cursor over one of the links in the navigation box, the whole box
jumps to its proper position.

Other pages on the same site have similar "jumps".

Reproducible: Always
Steps to Reproduce:
1.load the page (http://www.magma.ca/~andyk/index.html)
2.move mouse over a link in the navigation box (top right corner)


Actual Results:  navigation box jumps to new (proper) position

Expected Results:  navigation box should have appeared in the "new" position
when it was first loaded.

The navigation box is created using "document.write" statements in an external
javascript file.

Opera 5.12 displays the page properly (without jumping).

The navigation box uses the CSS property "position : fixed".

Comment 1

[Boris Zbarsky [:bzbarsky]]

Over to layout.  This is a problem on build 2001-07-15-21 on Linux as well.

Comment 2

[anthonyd]

problem still there.
reassigning to core owner as this is not a table specific bug.

Comment 3

[Alexey Chernyak]

Andy, take a look at following sections of CSS2 spec:
http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position
http://www.w3.org/TR/REC-CSS2/visuren.html#absolute-positioning

The offset of the box has to be explicitly specified. Your stylesheet fails to
specify vertical offset of the box. margin-top: property is not inheritable, and
thus doesn't apply to your navigation box. Try applying top: property to your
box and see what happens.

This happens not only on mouseover, but also on window resize. While it is
obviously a result of improper style sheet, the browser behaviour in handling of
this case seems to differ during DOM insertion and during reflow.

Over to Style System.

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

This is a layout bug, not a style system bug, unless you're arguing that both
positions are incorrect.

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

->Layout.  See:
http://lists.w3.org/Archives/Member/w3c-css-wg/2001OctDec/0290.html

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

er, really

Comment 7

[Boris Zbarsky [:bzbarsky]]

David, is there a public version of the document you cite?

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

nope.

Comment 9

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Anyway, it was just an email message from me to the WG list asking what should
happen with 'position: fixed' and 'top: auto', since the spec doesn't define it
well, plus a little general mumbling about whether 'top: auto' is really useful
at all given the difficulty of implementation...

Comment 10

[Ho KS]

Attachment: Positioning error

This site's address is http://www.cityofheroes.com/
The first time the page is loaded, some DIVs are rendered too much to the right
hand side.
If you refresh the page, they go back to the intended position.

Comment 11

[Ho KS]

Attachment: Positioning OK

This is the correct position

Comment 12

[Ho KS]

Another DIV wrongly displaced at http://cube.ign.com/
The positions are corrected only when the page is refreshed.

Comment 13

[Boris Zbarsky [:bzbarsky]]

Neither of the sites in comment 10, comment 11, comment 12 uses fixed
positioning, so they have nothing to do with this bug (as a separate note, I
cannot reproduce those problems).  I _can_ reproduce this problem.

Comment 14

[Vincent Lefevre]

I don't know if my CSS code is correct, but is it the same problem I have on

  http://www.vinc17.org/test/menu.html

? If I move the mouse pointer quickly over Menu, then the menu is sometimes
displayed for a very short period slightly to the left or to the right. This
problem disappears if I don't use "position: fixed".

Note: don't use Mozilla 1.0 to test that (the menu won't appear), but a more
recent version.

Comment 15

[Boris Zbarsky [:bzbarsky]]

Attachment: Minimal testcase

Vincent, you're seeing something different (reflow lag of some sort?).

The minimal testcase is for the original bug report (reduced from
http://www.magma.ca/~andyk/index.html).  The problem there is that the
stylesheet specifies none of top, bottom, height for the fixed-position div. 
These properties do not have a useful initial value, so we can place the thing
where ever we feel like, really....

The only bug is that we don't place it _consistently_.

Comment 16

[Boris Zbarsky [:bzbarsky]]

Attachment: more evil testcase (more like the site)

Comment 17

[Boris Zbarsky [:bzbarsky]]

Attachment: partial patch

So the problem is that if neither of top and bottom is specified then the
fixed-pos element should have its top where it would be if the element were
statically positioned.	So to position it properly we have to reflow the main
content, then position it.  That's what this patch does.  It fixes the minimal
testcase, but not the more evil one (where the <script> referencing an external
file kicks off a reflow that apparently does not flow the main content
correctly but does reflow the fixed-pos elements).  It also does not fix the
original site this is reported against.

Comment 18

[Vincent Lefevre]

I can reproduce the problem with the two new testcases (no patch applied).

Note that the problem isn't only a display problem. If I add submenus, the whole
menu no longer works at all (perhaps because :hover no longer works as expected
because the position is temporarily incorrect). This is solved by either using
"position: absolute" (instead of fixed) or by swapping left and right.

Comment 19

[Andy Korvemaker]

I've moved the original "problem" site (without the fixed css) to http://www.magma.ca/~andyk/mozilla-test/index.html in case it's still needed.

Comment 20

[Jose Fandos]

I just came across these two pages

http://sincerechoice.org/
   and
http://sincerechoice.org/Articles/index.html

And one of them is wrong. Both share a position:fixed element, in fact both take
the same stylesheet. The second one doesn't look good. "Fixed positioning is
just like absolute positioning, except the containing block of a fixed element
is always the viewport". So according to this, the second link _IS_ doing the
right thing and the first one, is not, though it's the first one that looks right.

On modifying the second page by adding <br /> so as to make the page big enough
for a scroll to appear, the div gets repositioned as in the first link, which
though it looks good again, is not according to spec, I believe.

As to what I am using, 1.1beta build 2002080508 on Windows XP (all patched). I
have no control over the pages mentioned. I just happened to go visit that
particular site.

I did check the code against style checkers (both html and css) and it should be
right. I post this here because it seems relevant and I don't fancy opening a
bug just like that. If anyone with a better grasp thinks it should go on a bug
by itself, might want to go ahead and add that new bug. I might also add this
comment to other bugs if I see it relevant. Just checking now. ;)

Comment 21

[Boris Zbarsky [:bzbarsky]]

Of those two, the first link is correct.  Note that "top" is not specified in
that stylesheet...

My "partial patch" fixes the second of those two links to look correct as well.

Comment 22

[Jose Fandos]

"Of those two, the first link is correct.  Note that "top" is not specified in
that stylesheet..."

Reading the specification (http://www.w3.org/TR/REC-CSS2/visuren.html#fixed-
positioning) for fixed positioning "the containing block is stablished by the 
viewport." If that's so, the second link, while not looking good, is correct. 
A top value should have been given in the css file to keep it from getting the 
default top: 0px; In the first page the reason why the #NavBar is not at 
top:0px is because the #NavBar is _NOT_ being "totally removed from the 
documents's flow". It shouldn't have a position relative to any part of the 
document. (From CSS: The Definitive Guide, by E. Meyer).

I guess the reason for this removal of the document flow is because if we 
would keep it in it, and we would have that fixed positioned element coming up 
later in the document, not showing on the first screen, but rather having to 
scroll down to view it, it wouldn't make sense, would it? Would the fixed 
positioned element, once it gets a hold of the viewport get stuck? Would it 
keep scrolling? If so, why did we use the positioned element in the first 
place?

IE6 does show both pages like the first one does in Mozilla. I guess they got 
that part wrong.

Comment 23

[Boris Zbarsky [:bzbarsky]]

> A top value should have been given in the css file to keep it from getting the 
> default top: 0px;

The default value of "top" is not 0px.  It's "auto".  See
http://www.w3.org/TR/REC-CSS2/visudet.html#abs-non-replaced-height for the rules
that govern layout in this case...  The containing block is the viewport, and
rule #1 says what should be done when "top" is "auto".

IE6 is getting the layout exactly correct here.

Comment 24

[Jose Fandos]

You are right :)

I guess then that a position:fixed element that is not at the top of the html so
as to show in the viewport, as you hit the page, is not going to show at all,
unless the viewport can be resized to encompass the element's original
position... cool, fixed elements allow to have notices for those with screens of
1280x1024 that won't be viewable by those with a smaller screen, for example.

But what behavior is expected when a position:fixed element that is in the
middle of a long document (let's say 10 viewports long) is just preceeded by a
named anchor and the page has been called from a link with that anchor in it?
Does it show then?

Comment 25

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I guess I think the meaning of 'top: auto' for fixed-positioned elements should
be changed...

Comment 26

[Mats Palmgren (inactive)]

*** Bug 168771 has been marked as a duplicate of this bug. ***

Comment 27

[Todd Kennedy]

This seems to be related to a question I just posted in the
news://netscape.public.mozilla.dom newsgroup.

I have a couple of test pages i'm working on to test out how to build certian
various components of websites i work on (tripod.com, angelfire.com,
htmlgear.com) into strict XHTML because i'm sick of doing 8-level nested tables
and watching them crash on netscape 4.

So i've been playing with CSS and XHTML and I'm geting the same problem.  my DIV
tag (the only thing on the page, it's the containter the rest of the stuff
appears in) is appearing on the page about 5px south of the top of the browser
viewport, even though my body tag has margin: 0; and padding: 0;.

i've validated my CSS and XHTML as both proper CSS2 and XHTML Strict 1.0, so (i
hope!) it's not my code, AND in IE 5.2 (mac) and IE 6.0 (pc) the pages are
appearing correctly (the top of the div is butted right against the top of the
browser viewport).

the page is:

http://www.selfassembled/divtest/

i can replicate the mozilla bug in:
netscape 7.0 (mac os 9)
mozilla 1.2.1 (mac os 9)
mozilla 1.2.1 (mac os x)
mozilla 1.0.1 (pc)

is this the same bug, and if so, is it planned for fixing soon?

thanks

Comment 28

[Andy Korvemaker]

Todd,


I don't think this is the same bug. In the original, the div jumped around on 
mouseover.


One thing that may help (I'm not a css expert) is to place a "top: 0px;" 
statement in your css file for the navigation bar.




Changing site submitted by Todd to http://www.selfassembled.net/divtest/

Comment 29

[Boris Zbarsky [:bzbarsky]]

Todd, your div is not position:fixed, so has _nothing_ to do with this bug.

You want to set the <html> margin to 0.

Comment 30

[Boris Zbarsky [:bzbarsky]]

.

Comment 31

[Boris Zbarsky [:bzbarsky]]

Attachment: updated partial patch

We should get this in; it fixes the common case of this bug...	and it's the
right thing to do no matter what.

Comment 32

[Boris Zbarsky [:bzbarsky]]

Attachment: slightly simpler more evil testcase

Comment 33

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Comment on attachment 112636 [details] [diff] [review]
updated partial patch

r+sr=roc+moz

Looks good.

Comment 34

[Boris Zbarsky [:bzbarsky]]

takins so it stays on my radar....

roc says this is no-go for 1.3, so landing it in 1.4a.

Comment 35

[Benjamin Streeck]

The way I see it the problem in this bug is not any mouse-over issue, but a
general redraw upon any event that causes position to be recalculated, such as
resizing the window, the addition of a scrollbar, or a mouse-over action that
redraws the element. If this is the case, then Bug 158398 is a duplicate, and
the current summary is very misleading.

Mark Bug 158398 as duplicate?

Change summary to: "position:fixed elements in wring position until screen
positions re-calculated" ?

Comment 36

[Boris Zbarsky [:bzbarsky]]

I'd rather keep it dependent as duplicate, because the patch here fixes that bug
but _not_ quite this one.

The summary is the one that describes the most common way to trigger this bug;
it may as well stay.

Comment 37

[Boris Zbarsky [:bzbarsky]]

Attachment: Merged to tip (includes fix for bug 192291)

In a fit of curiousity, I decided to check out what the value of "wasHandled"
was.  Turns out that the incremental reflow code was not handling the "eviler"
testcase.

This patch fixes all testcases attached to this bug and all dependent bugs.

Comment 38

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 114372 [details] [diff] [review]
Merged to tip (includes fix for bug 192291)

roc, how's about a repeat of that review?  The only real change was the slight
logic tweak to do a real reflow if the incremental reflow does not get
handled....

Comment 39

[Hixie (not reading bugmail)]

I take it your interpretation of 'auto' doesn't involve adjusting for the scroll
position... that could be, erm, fun.

Comment 40

[Boris Zbarsky [:bzbarsky]]

Er?  "auto" means we position it to line up with the placeholder, unless the page is scrolled.
That's the only interpretation that really makes sense per spec, to me.

Comment 41

[Boris Zbarsky [:bzbarsky]]

*** Bug 146303 has been marked as a duplicate of this bug. ***

Comment 42

[Boris Zbarsky [:bzbarsky]]

*** Bug 158398 has been marked as a duplicate of this bug. ***

Comment 43

[Boris Zbarsky [:bzbarsky]]

*** Bug 185119 has been marked as a duplicate of this bug. ***

Comment 44

[Boris Zbarsky [:bzbarsky]]

*** Bug 193266 has been marked as a duplicate of this bug. ***

Comment 45

[Boris Zbarsky [:bzbarsky]]

fixed for 1.4a.