Ticket #5033 (closed bug: wontfix)
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: | |
| Blocking: | Blocked by: |
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" />)
Change History
comment:2 Changed 4 years ago by Hasenpfote
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
comment:4 Changed 3 years ago by dmethvin
- Status changed from new to open
http://jsfiddle.net/dmethvin/25Jbj/ Confirmed on IE8.
comment:5 Changed 2 years ago by timmywil
- Priority changed from major to high
- Version changed from 1.2.6 to 1.6b1
- Milestone set to 1.next
Confirmed again. http://jsfiddle.net/timmywil/25Jbj/7/
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
Please attach a test case.