Bug Tracker

Modify

Ticket #5033 (closed bug: wontfix)

Opened 5 years ago

Last modified 2 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 4 years ago by john

  • Component changed from unfilled to fx

comment:4 Changed 3 years ago by dmethvin

  • Status changed from new to open

comment:5 Changed 3 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.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.