Last Comment Bug 598984 - Setting Opacity on a div covers floating div that shouldn't be covered
: Setting Opacity on a div covers floating div that shouldn't be covered
Status: RESOLVED INVALID
:
Product: Firefox
Classification: Client Software
Component: General (show other bugs)
: unspecified
: x86 Windows XP
: -- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2010-09-23 09:46 PDT by reece
Modified: 2010-09-24 03:49 PDT (History)
1 user (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments

Description reece 2010-09-23 09:46:01 PDT
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10 (.NET CLR 3.5.30729)

If you have a Div "A" that has a floating div "B" floating over it, and you set div "A" to be an opacity < 1, it covers the floating div with the opacity. 

I would expect it to not cover a div that is on top of the affected div. The major issue is that all links in the floating div are rendered un-clickable. 

Reproducible: Always

Steps to Reproduce:
Very simple HTML to reproduce:
1) create HTML file with the following HTML
2) View the HTML in firefox

<html>
<body>
	<div style='float: right; width: 200px; background-color: #FFFFCC;margin-right: 10px;'>
		<a href='#'>Testlink</a><br>
		<a href='#'>Testlink</a><br>
		<a href='#'>Testlink</a><br>
		<a href='#'>Testlink</a><br>
		<a href='#'>Testlink</a><br>
		<a href='#'>Testlink</a><br>
		<a href='#'>Testlink</a><br>
		<a href='#'>Testlink</a><br>
	</div>
	<div style='height: 100px; opacity: 0.3; background-color: #FFCCCC;'>
		Opacity Div, can't click links to the left.
	</div>
	<div style='height: 100px; background-color: #CCFFCC;'>
		No opacity, you CAN click the links
	</div>
</body>
</html>
Actual Results:  
Can't click links in the floating div due to the opacity being overlayed over it instead of only over the div that the css property was applied to. 

Expected Results:  
I would expect the floating div to float over the opacity since it was already floating over the div that the css property was set on.
Comment 1 philippe (part-time) 2010-09-23 20:14:28 PDT
That is expected. Opacity establishes a stacking context:
http://www.w3.org/TR/css3-color/#transparency
That means that your div with opacity applied is positioned on top of the floated div (as it comes later in the source code). Check CSS 2.1 appendix E for the details.
http://www.w3.org/TR/CSS21/zindex.html

Webkit (Safari, Chrome) and Opera have exactly the same behaviour.
Comment 2 reece 2010-09-24 03:49:33 PDT
Interesting, thanks for the information. :)

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