293967 - {inc} Page content moves when using fixed positioning, 5% offsets, and more

Status: RESOLVED FIXED

(Core :: Layout: Block and Inline, defect)

Description

[Thomas Verelst]

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; en) Opera 8.01
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8b) Gecko/20050217

This is a very specific problem which only occurs if the following 
"prerequisites" are met:

1) Since we're dealing with content that's wrongly positioned when something 
else overlaps it, the only good way to demonstrate this is by using a CSS :hover 
effect which displays an element that's otherwise removed; this way, we can see 
the content "move".  This bug is triggered with ANY element but I'm using DIVs 
to keep things simple.  So... a DIV with text, and then another DIV which is set 
to { display: none } initially but changed to { display: block } when the first 
DIV is hovered.

2) The two DIVs should be placed in another DIV which MUST be set to { position: 
fixed }

3) In the normal flow, there should be a DIV which MUST be set to { text-align: 
right }

4) The two "main" DIVs in the document tree MUST have a left and right offset of 
exactly 5 percent.  For the DIV that's "fixed", it MUST be specified using 
"left" and "right", not margin or padding: { left: 5%; right: 5% }.  For the DIV 
in the normal flow, you can use either margin or padding.

5) The DIV that's shown when the other DIV is hovered MUST cover the DIV in the 
normal flow.  For that, use either a top margin or a top padding on that DIV in 
the normal flow to bring it down.  I'm using padding because a margin is applied 
to the first, fixed DIV instead: { padding: 16px 5% 0 }.

For display purposes, I have added a bottom border to the DIV in the normal 
flow.  This is not needed to trigger the bug but it shows that it's only the 
CONTENT of that DIV that's being moved and not the DIV itself.

The testcase included here will only work in Mozilla 1.7 and up because of the 
"advanced" CSS specification, but it occurs in earlier versions as well.  I'll 
create another one later on which uses IDs on the DIVs so I can simplify the 
CSS.

Reproducible: Always

Comment 1

[Thomas Verelst]

Attachment: testcase (Moz 1.7+)

Comment 2

[Thomas Verelst]

Attachment: modified testcase (Moz 1.0+)

Comment 3

[Thomas Verelst]

OK... It was the "div:hover+div" that didn't make this work in versions earlier 
than 1.7.

Instead of changing the construction of the document, I've relocated the :hover 
effect to the main, fixed DIV (div:hover div+div) in the second testcase.

Comment 4

[Andrew Schultz]

confirmed with linux trunk 2005051121

==> layout

Comment 5

[Martijn Wargers (dead)]

Seems like a rounding error to me.

Comment 6

[Thomas Verelst]

Attachment: testcase w/ more text (Moz 1.0+)

Comment 7

[Thomas Verelst]

Added a testcase with more text in the DIV that's in the normal flow.  This 
shows that the "moving effect" only occurs on the last line and not the entire 
content of the DIV.  Fillers (dots) were added in the removed/shown DIV so 
it still overlaps the DIV in the normal flow.

Comment 8

[Thomas Verelst]

Attachment: Possible workaround w/ padding (Moz 1.0+)

Comment 9

[Thomas Verelst]

I have tested it some more, but it can also occur with different offset values 
and with margin on the fixed DIV, but not in all cases.

The only "allround" fix is to use padding for the fixed DIV:

position: fixed; width: 90%; padding: 0 5%;

This has the nasty side effect, though, of needing extra elements if one had a 
background and/or a border on that DIV.

Comment 10

[Justin Wood (:Callek)]

Andrew can you re-test?, I cannot seem to reproduce with any of the testcases

[Tested fullscreen Suite; Modern theme; Screen-size: 1280x1024]

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2) Gecko/20050513

Comment 11

[Thomas Verelst]

That's an interesting find, Justin.

I installed the 20050514 release and set its theme to Modern, but it still 
happened.  Then I changed the screen resolution to 1280x960... and the text 
didn't move anymore.  Resizing the window made the text move again.

It's not theme or release specific, though.  I changed the theme to Classic 
again and tried older releases and it's the same scenario there.

Comment 12

[Justin Wood (:Callek)]

In that case, I assume the issue *is* something odd with incremental reflow and
rounding...

Adding {inc} to summary in that case.  See also:
http://wiki.mozilla.org/Mozilla2:Units for the general rounding issue and how it
is intended to be solved.

Comment 13

[Steve England [:stevee]]

Testcase doesn't work with
Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.9a1) Gecko/20060124
Firefox/1.6a1 ID:2006012405
(the text on the right moves by a pixel when hovering over the text on the LHS)

Testcase does work with
Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.9a1) Gecko/20060126
Firefox/1.6a1 ID:2006012613
(the text on the right is stationary no matter what is hovered.)

--> RESOLVED FIXED (by bug 317375)