340141 - check boxes show through formerly hidden div

Status: RESOLVED WORKSFORME

(Firefox :: General, defect)

Description

[Anthony Baratta]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

on a multicolumn CSS layout of check boxes and labels, a hidden div (activated by a mouseover event) does not cover the check boxes and labels. The labels and the check boxes "show through" the now visible div as if the opacity of the new div is set to 50%.

An example will be posted shortly. I only have a screen capture right now.

Reproducible: Always



Expected Results:  
The check boxes should not show through a newly visible layer.

Comment 1

[Anthony Baratta]

Attachment: Screen Capture of described behaviour

Screen Capture of described behaviour

Comment 2

[Anthony Baratta]

Here is a live example:

http://baratta.net/PopTest/

Comment 3

[Anthony Baratta]

OK - I've uncovered the issue. It's a problem with how Firefox deals with hidden divs contained within floated divs. e.g. the referenced demo page has the following setup

<div column One>
   <div> check box</div>
   <div> title text </div>
   <div> hidden dhtml text</div>
</div>
<div column Two>
   <div> check box</div>
   <div> title text </div>
   <div> hidden dhtml text</div>
</div>
<br clear=all>

The column divs are float left and the hidden div is setup for position absolute, which is set (and visibility is turned on) with a mouseover event. For some reason Firefox displays the now visible div incorrectly with all divs that come "after" the div in the HTML page. e.g. if you roll over column one title text, and the now visible hidden div covers column two, the elements in column two will bleed through. However any divs covered by the dHTML appearing div that are before the dHTML div in the HTML will be covered correcty. The end result is a hybrid dHTML div, parts readable and other parts "bleeding through".

A change to the HTML, moving the hidden div to outside of the floating container, "fixes" the issue:

<div column One>
   <div> check box</div>
   <div> title text </div>
</div>
<div> hidden dhtml text</div>

<div column Two>
   <div> check box</div>
   <div> title text </div>
</div>
<div> hidden dhtml text</div>

However, I do belive that this is a rendering bug with Firefox. Something between the floating div and the absolute positioned div is causing a weird rendering result.

I hope this information is helpful.

Comment 4

[Brian Polidoro]

This does not happen with a trunk build.  
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20060708 Minefield/3.0a1 ID:2006070804 [cairo]

Comment 5

[Brian Polidoro]

This still happens in branch 2.0 builds.

I checked old trunk builds and found that:
20060125 still broken
20060126 first build that works
And looking at the checkins for that time I'm pretty much certain that bug 317375 corrected this problem.  If that bug was eligible for 2.0 it would have landed there by now.  So this won't be fixed in a release until 3.0.  

Marking WORKSFORME because the problem is not on the trunk.