Internet Explorer cannot perform image opacity animation correctly

Question

I have tested my website on all browsers and it works fine: http://bgsorken.com/sandbox/index.php Besides Internet Explorer 8 (and probably earlier versions). It works fine on IE9. On the main page if you look at the "watch trailer" player image, it has an opacity animation on mouseover. Somehow on IE8 this looks like this:

https://i.stack.imgur.com/47R3k.png

and animates to pitch black.

I have literally grown a few grey hair today because of this and now relying on the community here to potentially guide me to a solution.

score 1 · Accepted Answer · answered Nov 29 '11 at 14:14

1

I found this thread on Google. http://www.sitepoint.com/forums/showthread.php?590295-jQuery-fadein-fadeout-of-transparent-png-in-IE7-and-Chrome

This is one of the solutions talked about there:

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

}

Some people are also reporting that Unit's PNG fixe solves the issue. http://labs.unitinteractive.com/unitpngfix.php

answered Nov 29 '11 at 14:14

Filip

2,514
17
28

Thank you for the reply, however can you kindly elaborate on how I can add this fix? More details would be appreciated. – Alehandro Darie Nov 29 '11 at 14:16
I would try adding this css to img.bigFrameplaybutton. – Filip Nov 29 '11 at 14:18
I just tried it and it didn't seem to work. Can you kindly look at my stylesheet under bigframeplaybutton and see if I added it correctly? – Alehandro Darie Nov 29 '11 at 14:23
It sure does look like you added it to the right place. Right now I don't have any more ideas, sorry! – Filip Nov 29 '11 at 14:30
That is fine, thank you regardless. Hopefully someone else will assist me. – Alehandro Darie Nov 29 '11 at 14:32
Maybe this will help? http://stackoverflow.com/questions/1808015/jquery-fadein-ie-png-issue-when-loading-from-external – Filip Nov 29 '11 at 14:33
It did partly - I have decided to add a – Alehandro Darie Nov 29 '11 at 14:59
Thanks! I think you made a good decision there, grading down the experience for users with old browser forcing them to upgrade. – Filip Nov 29 '11 at 15:15

Internet Explorer cannot perform image opacity animation correctly

1 Answers1