294130 - outline around DIV with overflow: auto appears when right clicking, and the outline messes up page layout

Status: RESOLVED DUPLICATE of bug 286368

(Core :: Layout, defect)

Description

[CBWhiz]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2) Gecko/20050513 Firefox/1.0+
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2) Gecko/20050513 Firefox/1.0+

I have a page laid out using absolutely positioned DIVs in a layout with a top
header (horizontal) and two vertical bars (one for menu, one for content).

The two vertical bars have overflow: auto set.

Right clicking either DIV causes an outline to appear.
This outline procedes to cause a reflow, creating scrollbars because the edges
of the outline are outside of the viewable area.

This is not arguing about whether or not the outline should appear, this is
about the outline affecting layout, which, according to
http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines , it should not. ("The
outline created with the outline properties is drawn "over" a box, i.e., the
outline is always on top, and doesn't influence the position or size of the box,
or of any other boxes. Therefore, displaying or suppressing outlines does not
cause reflow.")

Reproducible: Always

Steps to Reproduce:
1. View testcase
2. Right click the menu or content DIV
3. Notice scrollbars

Actual Results:  
Scrollbars appeared

Expected Results:  
No scrollbars should have appeared

Comment 1

[CBWhiz]

Attachment: Testcase

Comment 2

[CBWhiz]

Bug does not appear in Firefox 1.0.4, though a bug that was fixed on the trunk
causing a horizontal scrollbar in the menu DIV shows up.

Comment 3

[Steve England [:stevee]]

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8b2) Gecko/20050514
Firefox/1.0+ ID:2005051402
I don't know if I should add the kw 'regression' as the left-hand side of the
testcase initially behaves differently between branch and trunk.

Comment 4

[Hermann Schwab]

Attachment: reduced testcase

you don´t need three divs, and there is only one issue:
the appearing of a vertical scrollbar, leading to a horizontal scrollbar.

Text in the top div 'header' was centered, so must shift to the left when the
vertical scrollbar took some place. Same goes for the shifting of the text in
the right div 'main', as the long text had to break at other places when the
div got smaller because of the vertical scrollbar.

Testcase isn´t minimized yet.

Comment 5

[José Jeria]

Attachment: Minimized testcase

Right click on the text will trigger scrollbars

Comment 6

[Hermann Schwab]

minimal CSS:
#main {
	position: absolute;
	overflow: auto;
	right: 0px;
	bottom: 0px;
}

overflow: auto; causes the outline and is needed for the scrollbars.
right: 0px; causes the horizontal scrollbar on right-click
bottom: 0px; causes the vertical scrollbar. 

right or bottom specified as 0px shows the corresponding scrollbar on
rightclick, if not specified or specified greater 0px the scrollbar isn´t seen.

Comment 7

[Boris Zbarsky [:bzbarsky]]

*** This bug has been marked as a duplicate of 286368 ***