Bug Tracker

Opened 13 years ago

Closed 12 years ago

Last modified 11 years ago

#6682 closed bug (invalid)

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


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

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

Download all attachments as: .zip

Change History (4)

Changed 13 years ago by infinitemonkeys

Attachment: PNG_Bad.zip added

HTML, JS, and CSS files

comment:1 Changed 13 years ago by dmethvin

Component: unfiledfx

comment:2 Changed 12 years ago by addyosmani

need: ReviewTest Case
Priority: undecided
Resolution: invalid
Status: newclosed

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 11 years ago by [email protected]

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.