Bug Tracker

Ticket #6682 (closed bug: invalid)

Opened 4 years ago

Last modified 3 years ago

PNG partial transparency not working in IE 8 with fadeTo()

Reported by: infinitemonkeys Owned by:
Priority: undecided Milestone: 1.4.3
Component: effects Version: 1.4.2
Keywords: PNG IE IE8 transparency fadeTo fadeIn Cc:
Blocking: Blocked by:

Description

This problem is similar to #4786 though my problem description is somewhat different and I am using more current versions of JQuery and IE.

When using PNG graphics and fadeTo to fade in, the portions of the graphic that are completely transparent are properly transparent. The portions that are partially transparent are solid. In the case of the main logo graphic bottom left, this makes the mostly transparent background grid completely black. After much testing, I finally found out that using fadeIn and fadeOut for complete fades will fix the problem, though I do notice a brief moment during the fade in at the beginning where it looks like the problem still exists briefly, but quickly 'corrects' itself.

The problem does not appear in Firefox, Chrome, Safari, or Opera, only IE and appears in versions up to 8.0.7600. This does not seem to affect or be affected by opacity or hidden visibility. Other PNG graphics on the page suffer the same problem, but less obviously since they are over proper/similar backgrounds and 100% opacity works.

The corrected line with fadeIn replacing fadeTo is remarked below the improperly working line in the Hawk12alt.js file. Again, this 'works' but it looks like it is failing initially, then 'fixing' itself quickly.

I have attached the files necessary to reproduce this problem.

Attachments

PNG_Bad.zip Download (32.4 KB) - added by infinitemonkeys 4 years ago.
HTML, JS, and CSS files

Change History

Changed 4 years ago by infinitemonkeys

HTML, JS, and CSS files

comment:1 Changed 4 years ago by dmethvin

  • Component changed from unfiled to fx

comment:2 Changed 4 years ago by addyosmani

  • need changed from Review to Test Case
  • Priority set to undecided
  • Status changed from new to closed
  • Resolution set to invalid

Your supplied test cases includes the necessary HTML/CSS/JS files but you forgot to include your /images folder.

I went in and replaced them with suitable transparent PNG files to carry out the test but it appears that everything is working fine in IE8 as per the other browsers with respect to fadeTo()'s behavior.

Could you re-submit a ticket with all the files necessary to reproduce your test just so we can check again to make sure?.

comment:3 Changed 3 years ago by vishaal.chedi@…

Solution is this

.item img 
{
	background: transparent;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
	zoom: 1;
}

source :  http://www.sitepoint.com/forums/showthread.php?590295-jQuery-fadein-fadeout-of-transparent-png-in-IE7-and-Chrome

Note: See TracTickets for help on using tickets.