Question

I am using Raphäel.js library.

I have a set of Raphäel image elements:

var paper = Raphael(10, 50, 320, 200);

var appleImg = paper.image("apple.png", 10, 10, 30, 30); 
var orangeImg = paper.image("orange.png", 50, 50, 30, 30);
var pearlImg = paper.image("pearl.png", 100, 100, 30, 30);

var imgSet = paper.set();
imgSet.push(appleImg, orangeImg, pearlImg);

As you see above, I push all images to the set of imgSet .

Then, I add a mouse down event to the image set like following:

imgSet.mousedown(
    function(event) {

        imgSet.attr({opacity: .5});

            }

);

The mouse down event handler is intend to change all image to be 50% transparent.

The code above is working well on Chrome, Firefox and Opera.

But when I test the code on IE 8, I got black border on each image element, why?

(The 50% transparent is also showing on IE 8 which is fine, but why there is black border on each image element?)

P.S.
I have thought may be it is because of the 50% transparency change on image which cause this IE problem, but after I commented out the line // imgSet.attr({opacity: .5}); I still got black border on each image.

Answer 1

I guess this is due to the IE bug with semi-transparent images and alpha filter: http://solidlystated.com/design/ie-png-black-border-on-hover/