The default bug view has changed. See this FAQ.

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

RESOLVED FIXED in mozilla1.8beta1

Status

()

Core
Layout
P2
normal
RESOLVED FIXED
12 years ago
12 years ago

People

(Reporter: Justin, Assigned: bz)

Tracking

({testcase})

Trunk
mozilla1.8beta1
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(5 attachments)

(Reporter)

Description

12 years ago
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

12 years ago
reporter, can you make a reduced test case?
Assignee: firefox → nobody
Component: General → Layout
Product: Firefox → Core
QA Contact: firefox.general → core.layout
Version: 1.0 Branch → Trunk

Comment 2

12 years ago
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.
(Reporter)

Comment 3

12 years ago
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

12 years ago
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
Keywords: testcase

Comment 5

12 years ago
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; }
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?
(Reporter)

Comment 6

12 years ago
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

12 years ago
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
content.

Comment 8

12 years ago
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
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

12 years ago
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.
Status: UNCONFIRMED → NEW
Ever confirmed: true

Comment 10

12 years ago
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;}
Created attachment 173042 [details] [diff] [review]
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.
Assignee: nobody → bzbarsky
Status: NEW → ASSIGNED
Attachment #173042 - Flags: superreview?(roc)
Attachment #173042 - Flags: review?(roc)
OS: Windows XP → All
Priority: -- → P2
Hardware: PC → All
Summary: fieldset legend hover bug → [FIX]fieldset legend hover bug (space above fieldset border not painting)
Target Milestone: --- → mozilla1.8beta
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.
Attachment #173042 - Flags: superreview?(roc)
Attachment #173042 - Flags: superreview+
Attachment #173042 - Flags: review?(roc)
Attachment #173042 - Flags: review+
Fixed.
Status: ASSIGNED → RESOLVED
Last Resolved: 12 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.