Bug Tracker

Ticket #5033 (closed bug: wontfix)

Opened 5 years ago

Last modified 3 years ago

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:1 Changed 5 years ago by dmethvin

Please attach a test case.

comment:2 Changed 5 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:3 Changed 5 years ago by john

  • Component changed from unfilled to fx

comment:4 Changed 4 years ago by dmethvin

  • Status changed from new to open

comment:5 Changed 4 years ago by timmywil

  • Priority changed from major to high
  • Version changed from 1.2.6 to 1.6b1
  • Milestone set to 1.next

comment:6 follow-up: ↓ 7 Changed 3 years ago by rpflorence@…

Can fix with CSS filter: inherit.

 http://jsfiddle.net/rpflorence/25Jbj/11/

comment:7 in reply to: ↑ 6 Changed 3 years ago by rpflorence

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.

comment:8 Changed 3 years ago by dmethvin

  • Status changed from open to closed
  • Resolution set to wontfix

Per triage.

Note: See TracTickets for help on using tickets.