Side navigation
#5033 closed bug (wontfix)
Opened August 11, 2009 01:48PM UTC
Closed July 11, 2011 07:54PM UTC
Last modified March 13, 2012 06:34PM UTC
fade not working on inner divs in ie8
| Reported by: | jm.federico | Owned by: | |
|---|---|---|---|
| Priority: | high | Milestone: | 1.next |
| Component: | effects | Version: | 1.6b1 |
| Keywords: | fadeIn fadeOut fade inner div ie8 | Cc: | |
| Blocked by: | Blocking: |
Description
When you apply a fade effect to a DIV, and there are other DIV nested into the one that is being faded, those inner divs won't fade.
Happens when using IE8 rendering engine (<meta http-equiv="X-UA-Compatible" content="IE=edge" />)
If the pages is rendered emulating IE7 it will work (<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />)
Attachments (0)
Change History (8)
Changed August 11, 2009 10:01PM UTC by comment:1
Changed August 15, 2009 02:01PM UTC by comment:2
Hallo,
I also notice this problem and built an example. Of course you must change the path to your jQuery-library.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<script src="../../../libraries/jquery/jquery-1.3.2.js" type="text/javascript"></script>
<style type="text/css">
#big {width: 200px; height: 200px; border: 1px solid black; position: absolute; top: 100px;}
#small1 {width: 50px; height: 50px; background-color: red; position: relative;}
#small2 {width: 50px; height: 50px; background-color: green;}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){jQuery('#link').click(function(){jQuery('#big').fadeTo(500, '0.35');});});
</script>
</head>
<body>
<div id="big"><div id="small1"></div><div id="small2"></div></div>
<div><a href="#" id="link" title="click me">click me</a></div>
</body>
</html>
The problem is caused by the style "position: relative;" for the small red square.
In IE 8 (compatible view) it works and in IE8 (incomp. view) it doesn't.
There is no problem in FF3, Opera or Safarie4.
I hope my example helps.
Hasenpfote
Changed November 11, 2009 08:17PM UTC by comment:3
| component: | unfilled → fx |
|---|
Changed November 20, 2010 02:06PM UTC by comment:4
| status: | new → open |
|---|
http://jsfiddle.net/dmethvin/25Jbj/ Confirmed on IE8.
Changed April 17, 2011 08:00PM UTC by comment:5
| milestone: | → 1.next |
|---|---|
| priority: | major → high |
| version: | 1.2.6 → 1.6b1 |
Confirmed again. http://jsfiddle.net/timmywil/25Jbj/7/
Changed June 08, 2011 06:21AM UTC by comment:6
Can fix with CSS filter: inherit.
Changed June 08, 2011 02:41PM UTC by comment:7
I battled this a while back, I'm not sure there is a jQuery solution since the problem is an arbitrary child element. I suppose you could manipulate all the children elements--but, man, that'd be a performance hit to such a common method.
Changed July 11, 2011 07:54PM UTC by comment:8
| resolution: | → wontfix |
|---|---|
| status: | open → closed |
Per triage.
Please attach a test case.