Skip to main content

Bug Tracker

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 dmethvin comment:1

Please attach a test case.

Changed August 15, 2009 02:01PM UTC by Hasenpfote 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 john comment:3

component: unfilledfx

Changed November 20, 2010 02:06PM UTC by dmethvin comment:4

status: newopen

Changed April 17, 2011 08:00PM UTC by timmywil comment:5

milestone: → 1.next
priority: majorhigh
version: 1.2.61.6b1

Changed June 08, 2011 06:21AM UTC by rpflorence@gmail.com comment:6

Can fix with CSS filter: inherit.

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

Changed June 08, 2011 02:41PM UTC by rpflorence 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 dmethvin comment:8

resolution: → wontfix
status: openclosed

Per triage.