IE7 PNG Transparency and Flash

Update: 25th August 2006

This article relates to IE7 Beta3. A day after I wrote this article, Microsoft released IE7 RC1 which seems to have fixed this problem (at least, according to the tests below). So, hooray!

Alpha support for PNG images is one of many fixes and features we can get excited about in IE7. Well… sort of.

Following news that the new PNG transparency support might not be as native as previously supposed, I ran into another strange issue while preparing a website for IE7.

In some circumstances, transparent PNG background images of a parent node will be rendered within a child node. IE7 seems to triggered this behaviour when a Flash movie is embedded into a page. This situation isn’t particularly unusual, for example, we have a heading with a link inside:

<h2> <a href="http://example.com">My Great Heading!</a> </h2>

The h2 is then styled with a background image and the link is coloured red when hovered over:

h2 { width: 100px; height: 50px; background: transparent url(myImage.png) no-repeat top; } h2 a:hover { color: #FF0000; }

If a Flash movie is embedded in a page the link will render the background of its parent when hovered over. Strangely, minimising, then restoring the window will reset the link background (until it’s hovered over again). Also, once the bug is triggered by a Flash movie, visiting pages without Flash will still render the background when the link is hovered over. Below is a screen capture of the rendering bug.

Screen capture of IE7 PNG rendering bug

Check out the live demos (you’ll need IE7 Beta3):

Transparent PNG test with no Flash

Transparent PNG test with Flash movie embedded