277313 - [FIX]fieldset legend hover bug (space above fieldset border not painting)

Status: RESOLVED FIXED

(Core :: Layout, defect, P2)

Description

[Justin]

I have this rather long form I am developing right now, which utilizes fieldsets
and lots of CSS to style it up. I've seen this behavior in several different
Firefox versions, including 1.0, 1.0 PR and 0.9

If you go to the URL specified, and hover over the drop down menu that has the
words "Home Value?" in the drop down. This is the 5th user-input area down in
the second fieldset "step 2 of 4".

If you scroll down to the thrid fieldset, "Step 3 of 4", and hover over the
first drop down you will see a similar behavior.

It appears to apply a black background to the fieldset's legend which matches
the width of the drop-down you hovered over. This only seesm to work on certain
dropdowns.

It also happens in the last fieldset if you hover over the second input box
(last name) or the drop down menu "select state".

I have a newer version of this page which is not available publiclly, it
displays more of this behavior when I use Javascript to dynamically change the
text of a fieldset's legend.

I have another page which uses the same CSS for a fieldset, yet it does not have
any odd hover effect problems. The other form which works fine is located here:
https://www.alploan.com/contactus.aspx

In the form displaying the odd behavior, I use the :hover state to apply
background and border changes to input boxes. I tried commenting this CSS out
and it didn't seem to help the problem.

I tried finding any information about this and couldn't, I searched the bug list
and didn't see anything. Thanks for your time, I really hope this doesn't turn
out to be something I have done wrong.

Comment 1

[Patrick]

reporter, can you make a reduced test case?

Comment 2

[Hermann Schwab]

Attachment: reduced testcase, css included

Increased font size for legend tenfold, cut some markup and css.
Hover over the selects, click on the arrows and into the select field.

Comment 3

[Justin]

Thanks for making the reduced test case. It doesn't display the hover effect
anymore, but if you try to highlight the legend text the background will become
black. The black background will not go away until you click on a select box. 

This seems releated to the bug in the original case (sans hover effect).

Comment 4

[Hermann Schwab]

Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.8a6) Gecko/20050107

to see the testcase working, you´ve got to resize the window trhat a vertical
scrollbar is seen, and maybe scrolldown and use the lower select with hovering
and clicking. The bug is dependend on the scroll position, normally you´ve got
to scroll down to see the bug.

Steps to reproduce: 
1. resize the window, that a vertical scrollbar is seen
2. if upper select doesn´t show the bug, scroll down and try at lower select.

or:
1. load testcase
2. click on upper select, hover
3. if bug isn´t seen, reduce heigth of window, retry step 2

I´m seeing the bug on 800x600, win98, SiS6326 graficscard

Comment 5

[Hermann Schwab]

Attachment: minimal testcase

steps to reproduce:

1. resize window so that horizontal and vertical scrollbar are seen
2. use any scrollbar, junk is scrolled in on the upper region

CSS included:
body{	background:lime; }
fieldset{
	background:orange;
//	margin:0;position:relative;
	}
fieldset legend{ font-size:4em; }
div{
	background:yellow;
	margin:auto;
	width:760px;
}

testcase doesn´t work if I remove the comment
//	margin:0;position:relative;
or reduce it to
//	position:relative;

I've been thinking CSS allows C++ style // comments to the end of the line,
seems in CSS // is a comment to the next semicolon or EOL, whichever comes
first?

Comment 6

[Justin]

That type of CSS comment only appears to work in Mozilla based browsers, it's
not standard and should not be used, as it could cause unexpected behavior.

Use the *other* C++ style..

fieldset{
border:1px solid red;
/*background:pink;*/
}

Comment 7

[Hermann Schwab]

Attachment: gaps in the div produced by tooltips

body is lime, div is yellow, fieldset orange.
When I hover over the tabs, the title is shown in a tooltip.  Let the pointer
stay on the tab, until the tooltip vanishes, and you see a gap in the
rendering, the part hidden by the tooltip isn´t redrawn with its original
content.

Comment 8

[Hermann Schwab]

Attachment: simple testcase quirks mode

this testcase made in quirks mode, neither doctype nor encoding specified.
testcase shows vertical and horizontal scrollbar on 800x600, if not, resize.
Same code with doctype&encoding specified validates as HTML4.01, CSS also
validating.

To see the bug:
1. Load attachment, scroll horizontally: works for me
2. scroll vertically: junk scrolling in from top
3. scroll horizontally: junk scrolled out, original scrolled in.

Comment 9

[Hermann Schwab]

confirming, didn´t find a dupe.

CSS of quirks mode testcase:

body            { background:lime;}
fieldset        { background:orange; position:relative;}
fieldset legend { font-size:8em;}
div             { background:yellow; margin:auto; width:760px;height:400px;}

If I delete 'position:relative;', all is well.

Comment 10

[Hermann Schwab]

I removed all colors from the css, didn´t see the bug, then added colours again.

Bug is seen if both background: and position:relative is specified, one rule is ok.

fieldset        { background:orange; position:relative;}

Comment 11

[Boris Zbarsky [:bzbarsky]]

Attachment: Patch

This is really easy to see if you set opacity on the fieldset...

The problem is that the fieldset doesn't paint its background over its whole
rect, but claims it will.

Comment 12

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

Comment on attachment 173042 [details] [diff] [review]
Patch

I'd prefer it if you just returned PR_FALSE. Otherwise we have to worry about
ensuring that if a legend is created, that the view is re-synced with the
frame. And I don't think we really care about optimizing the no-legend case.

Comment 13

[Boris Zbarsky [:bzbarsky]]

Fixed.