Bug Tracker

Opened 13 years ago

Closed 12 years ago

Last modified 11 years ago

#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:
Blocked by: Blocking:


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 (8)

comment:1 Changed 13 years ago by dmethvin

Please attach a test case.

comment:2 Changed 13 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">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<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;}

<script type="text/javascript">
jQuery(document).ready(function(){jQuery('#link').click(function(){jQuery('#big').fadeTo(500, '0.35');});});

  <div id="big"><div id="small1"></div><div id="small2"></div></div>
  <div><a href="#" id="link" title="click me">click me</a></div>

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.


comment:3 Changed 13 years ago by john

Component: unfilledfx

comment:4 Changed 12 years ago by dmethvin

Status: newopen

comment:5 Changed 12 years ago by timmywil

Milestone: 1.next
Priority: majorhigh

comment:6 Changed 12 years ago by [email protected]

Can fix with CSS filter: inherit.


comment:7 in reply to:  6 Changed 12 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 12 years ago by dmethvin

Resolution: wontfix
Status: openclosed

Per triage.

Note: See TracTickets for help on using tickets.