PNG transparency plus opacity – Internet Explorer 8 bug

This bug seems to be bugging us from IE7 and i still can’t believe that after 8 years of work, Microsoft can’t make the alpha transparency work.

Just installed the new Internet Explorer 8 as an update. The first thing i tried to do was, of course, to check how my portfolio is looking. Immediately noticed that something is not right and as i researched i found that: if you use PNG transparent image, in combination with opacity filter in IE8 the png image looses its transparency.

Checkout the demo page.

It’s even more interesting that even opacity 100(which is no opacity at all) triggers the bug.

This is very uncomfortable for JavaScript programming, where you want to use opacity for appearing/disappearing objects.

There is one workaround which is not very comfortable but works! To use the png image   as a background with the AlphaImageLoader filter. Here is the workarownd.

Microsoft did it again

I just received notification from my Windows for a new update (Internet Explorer 8). How happy i was that microsoft released IE8 as an update. We can finally say “Bye, bye !” to the weird semi-standard compliant IE 7 and say “Welcome” to the new modern IE8. Horraaay! 🙂

I rushed to restart my PC and open the new shiny browser. The first page to check was  of course my portfolio, to check if it’s properly rendered and “BANG&#@&#&#@” I’ve got this baloon asking me something :

Compatibility View

It suggest me to click it,… and so i did… and it turned out to be IE7.

At the end i had to go and add the famous meta:

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />

The question i have is: What if we have to add meta for every browser on Internet?

PNG transparency plus opacity – Google Chrome bug

I was working on my portfolio when i found this bug in Chrome version 1.0.154.65. When applying opacity to an element with PNG transparency, the browsers looses the transparency of the PNG image.

Here is an example

Note: This bug has been fixed in version: 2.0.172.28

Hello world!

Hello and Welcome to my humble Blog! My name is Yordan Stoev. I don’t know much about myself, but what i know for sure is that I love the design. I hope that we will be able to discover new territories of the design together.

Kind Regards
Yordan Stoev