Closed Bug 400401 Opened 17 years ago Closed 16 years ago

Odd rendering with opacity on body vs. a div sized to the body

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: robert.flaherty, Unassigned)

Details

User-Agent:       Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.1)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

This cropped while testing some issues with layered opacity.  I'm including two examples:

Example1: opacity on body
<body style="background:yellow url('http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif'); margin:0px; opacity:.50; filter:alpha(opacity=50);">
	<div style="background:green; border:2px solid red;">
		<img style="border:2px solid blue; " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
		<img style="border:2px solid blue; filter:gray(); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
		none<br>
		<img style="border:2px solid blue; opacity:0; filter:alpha(opacity=0); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
		<img style="border:2px solid blue; opacity:0; filter:alpha(opacity=0) gray(); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
		0%<br>
		<img style="border:2px solid blue; opacity:.25; filter:alpha(opacity=25); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
		<img style="border:2px solid blue; opacity:.25; filter:alpha(opacity=25) gray()" src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
		25%<br>
		<img style="border:2px solid blue; opacity:.5; filter:alpha(opacity=50); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
		<img style="border:2px solid blue; opacity:.5; filter:alpha(opacity=50) gray()" src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
		50%<br>
		<img style="border:2px solid blue; opacity:.75; filter:alpha(opacity=75); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
		<img style="border:2px solid blue; opacity:.75; filter:alpha(opacity=75) gray()" src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
		75%<br>
		<img style="border:2px solid blue; opacity:1; filter:alpha(opacity=100); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
		<img style="border:2px solid blue; opacity:1; filter:alpha(opacity=100) gray(); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
		100%<br>
	</div>
</body>

Example2: opacity on div which is sized to the body
<body style="margin:0px;">
	<div style="background:yellow url('http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif'); opacity:.50; filter:alpha(opacity=50); width:100%; height:100%;">
		<div style="background:green; border:2px solid red;">
			<img style="border:2px solid blue; " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
			<img style="border:2px solid blue; filter:gray(); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
			none<br>
			<img style="border:2px solid blue; opacity:0; filter:alpha(opacity=0); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
			<img style="border:2px solid blue; opacity:0; filter:alpha(opacity=0) gray(); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
			0%<br>
			<img style="border:2px solid blue; opacity:.25; filter:alpha(opacity=25); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
			<img style="border:2px solid blue; opacity:.25; filter:alpha(opacity=25) gray()" src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
			25%<br>
			<img style="border:2px solid blue; opacity:.5; filter:alpha(opacity=50); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
			<img style="border:2px solid blue; opacity:.5; filter:alpha(opacity=50) gray()" src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
			50%<br>
			<img style="border:2px solid blue; opacity:.75; filter:alpha(opacity=75); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
			<img style="border:2px solid blue; opacity:.75; filter:alpha(opacity=75) gray()" src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
			75%<br>
			<img style="border:2px solid blue; opacity:1; filter:alpha(opacity=100); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
			<img style="border:2px solid blue; opacity:1; filter:alpha(opacity=100) gray(); " src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif">
			100%<br>
		</div>
	</div>
</body>


Reproducible: Always

Actual Results:  
The two examples render differently

Expected Results:  
I expected them to render the same, not sure what is happening and if its' expected.
Thanks for reporting, but there's no bug. Here's why:

1. In the second example you only gave the div element 100% width and height. That has no effect at all, because it's undefined to what 100% relies. You'd have to give the html and the body element a width and height of 100% as well.
Else, the body is actually shrinking to the div's actual height.
* Well, that's if you're in standards mode where you should be in.

2. The body element in HTML got magic! When the html element's background-color and -image properties are set to their default values, the body element's values for these properties are propagated to the html element. You can confirm this if you set the background for the html element to white. Now example no 1 renders the same as example no 2.

3. The green div in the second example doesn't let the background image shine through. Opera and Safari render it the same, so I guess this is intentionally. However, for this one I couldn't find the relevant specification.
Status: UNCONFIRMED → RESOLVED
Closed: 16 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.