Unable to use opacity animation w/ position:relative on children
- by chovy
Consider the following (applies to all IE6+ browsers -- including IE8):
<div id="picture">
<div class="thumb" style="position: relative;"><img .. /></div>
<p>Some description</p>
</div>
When I animate the opacity down to 0 it only works if I change the .thumb class to position: static.
This has bigger problems because I use that to constrain absolutely positioned children to that container.
I've tried all the hacks I have discovered, none work (bg-color, zoom, etc).
You can see an example here:
http://chovy.dyndns.org/test/opacity3.html
I need to use position: relative on the real world case throughout the container that is getting the animation.