Last Comment Bug 277313 - [FIX]fieldset legend hover bug (space above fieldset border not painting)
: [FIX]fieldset legend hover bug (space above fieldset border not painting)
: testcase
Product: Core
Classification: Components
Component: Layout (show other bugs)
: Trunk
: All All
P2 normal (vote)
: mozilla1.8beta1
Assigned To: Boris Zbarsky [:bz] (still a bit busy)
: Jet Villegas (:jet)
Depends on:
  Show dependency treegraph
Reported: 2005-01-06 13:13 PST by Justin
Modified: 2005-02-01 19:04 PST (History)
2 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

reduced testcase, css included (4.08 KB, text/html)
2005-01-07 10:35 PST, Hermann Schwab
no flags Details
minimal testcase (651 bytes, text/html)
2005-01-07 16:13 PST, Hermann Schwab
no flags Details
gaps in the div produced by tooltips (12.71 KB, image/png)
2005-01-07 16:52 PST, Hermann Schwab
no flags Details
simple testcase quirks mode (389 bytes, text/html)
2005-01-07 17:10 PST, Hermann Schwab
no flags Details
Patch (2.50 KB, patch)
2005-01-31 19:44 PST, Boris Zbarsky [:bz] (still a bit busy)
roc: review+
roc: superreview+
Details | Diff | Splinter Review

Description User image Justin 2005-01-06 13:13:03 PST
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

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:

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 User image Patrick 2005-01-06 14:20:02 PST
reporter, can you make a reduced test case?
Comment 2 User image Hermann Schwab 2005-01-07 10:35:18 PST
Created attachment 170575 [details]
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 User image Justin 2005-01-07 10:41:55 PST
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 User image Hermann Schwab 2005-01-07 14:48:56 PST
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.

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 User image Hermann Schwab 2005-01-07 16:13:05 PST
Created attachment 170608 [details]
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; }
//	margin:0;position:relative;
fieldset legend{ font-size:4em; }

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
Comment 6 User image Justin 2005-01-07 16:19:55 PST
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..

border:1px solid red;
Comment 7 User image Hermann Schwab 2005-01-07 16:52:00 PST
Created attachment 170618 [details]
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
Comment 8 User image Hermann Schwab 2005-01-07 17:10:45 PST
Created attachment 170623 [details]
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

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 User image Hermann Schwab 2005-01-07 17:20:28 PST
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 User image Hermann Schwab 2005-01-07 17:36:06 PST
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 User image Boris Zbarsky [:bz] (still a bit busy) 2005-01-31 19:44:31 PST
Created attachment 173042 [details] [diff] [review]

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 User image Robert O'Callahan (:roc) (email my personal email if necessary) 2005-02-01 16:21:19 PST
Comment on attachment 173042 [details] [diff] [review]

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 User image Boris Zbarsky [:bz] (still a bit busy) 2005-02-01 19:04:28 PST

Note You need to log in before you can comment on or make changes to this bug.