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.
reporter, can you make a reduced test case?
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.
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).
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
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?
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;*/ }
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.
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.
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.
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.
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.
Fixed.
or
