[jQuery] strange behavior when using jQuery fadeOut function on element with floated element and absolutely positioned element

[jQuery] strange behavior when using jQuery fadeOut function on element with floated element and absolutely positioned element


I am having some strange behavior with the fadeOut function. I asked
about it on StackOverflow. If you want, you can see the discussion at
http://stackoverflow.com/questions/735292/strange-behavior-when-using-jquery-fadeout-function-on-element-with-floated-eleme
. Someone on there mentioned that this is a bug with jQuery 1.3.2 and
it is not present in 1.3.
I have pasted the question below in case anyone is unable to view the
discussion:
I am trying to use jQuery to fade out a div, using the fadeOut
function. In most cases, it seems to work fine, but in certain cases,
not all of the content fades out. If I have an absolutely positioned
element and a floated element within the div, the fadeOut function
doesn't work. If I only have an absolutely positioned element, it
doesn't work. But if I have an absolutely positioned element and an
unstyled element, it works. This may sound hard to explain, but you
can try it yourself using this test code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>jQuery fadeOut test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div id="testBox1" style="position: relative">
<div>test</div>
<p style="position: absolute; left: 0; top: 0">This text should
fade out.
</div>



<button type="button" onclick="$('#testBox1').fadeOut()">fade out</
button>
<!-- works -->
<hr>
<div id="testBox2" style="position: relative">
<div style="float: left">test</div>
<p style="position: absolute; left: 0; top: 0">This text should
fade out.
</div>



<button type="button" onclick="$('#testBox2').fadeOut()">fade out</
button>
<!-- doesn't work -->
<hr>
<div id="testBox3" style="position: relative">
<p style="position: absolute; left: 0; top: 0">This text should
fade out.
</div>



<button type="button" onclick="$('#testBox3').fadeOut()">fade out</
button>
<!-- doesn't work -->
</body></html>
Everything seems to work fine in IE7, but in Firefox and Chrome, I am
getting the strange behavior. Can anyone figure out why? Am I doing
something wrong, or is it a browser bug or a bug within jQuery?
You can see an example you can easily tinker with at http://jsbin.com/obipe
. Add /edit at the end of the URL to be able to edit it.