Side navigation
#6682 closed bug (invalid)
Opened June 16, 2010 05:56PM UTC
Closed October 03, 2010 02:21AM UTC
Last modified March 13, 2012 08:14PM UTC
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: |
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 (1)
Change History (3)
Changed June 18, 2010 01:01AM UTC by comment:1
| component: | unfiled → fx |
|---|
Changed October 03, 2010 02:21AM UTC by comment:2
| need: | Review → Test Case |
|---|---|
| priority: | → undecided |
| resolution: | → invalid |
| status: | new → closed |
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?.
Changed September 19, 2011 08:49AM UTC by comment:3
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;
}