Cross Browser Transparency with PNG NixBoxDesigns

April 25, 2018 at 3:13 pm by nixboxdesigns | Posted in Web design

The Problem with .PNG

What do you think of when you read or hear the term “transparency” in a web related conversations?

.png might be some peoples answer. “UGH!”, could be a common answer also. If you go to my website you’ll notice some ink splatter headers that sit throughout the design. I had quite a hard time getting those to display correctly thanks to Internet Explorers lack of native png transparency support. It is one of THE most complained about topics on the web (and I have done my fair share of it). People have been asking for the support since BEFORE version 5.0 but today, there are still a lot of hacks and “fixes”, it shouldn’t be that hard to use transparency.

Here’s an example of a browser that supports png transparency, and IEs lack of it.

no png support
png support

Market Share – The reason it is such a hugely discussed topic is because IE has over 75% of the browser market share. (between versions 6 and 7) Check it out:

browser market share

That is a huge amount! It would probably be safe to say that everyone who owns a PC and is not working in the web industry is using Internet Explorer to browse websites. With the exception of those handful of people related to somebody that works in this industry, hah!

The workarounds for fixing the transparency problem

These are some, but not all of the workarounds, new ways are being created frequently but these are the ones we will explain below.

Twin Helix iepngfix.htc

I ran into this fix for png transparency when I was developing my site. It is probably one of the easiest fixes out there to get working. All you need is a blank .gif image and to initiate the script via your stylesheet:

Example – initiating iepngfix.htc script

img{
behavior: url(iepngfix.htc);
}
/* or you can target specific elements and their backgrounds /*

#header{
width: 800px;
height: 200px;
background: url(path/to/image.png);
behavior: url(iepngfix.htc);
}
Of course this is considered a “hack” and it has some limitations to it

For 100% dependability, your elements should not have any auto-widths or heights.
Sometimes you’ll get flickering. It’ll display the broken png for a second before the script kicks in.
Can’t be used on repeating background images.
For more on this method you can go to TwinHelix.com or straight to his demo page

Jquery .ifixpng

Ahh, jquery. I find jquery as one of (if not THE) best javascript library out there. I found this fix while working on some admin panels for Buffini & Company. With the jquery.ifixpng plugin you can replace all the images on the page or you can target certain elements on the page. For this fix you will need a blank or one pixel gif, Jquery and of course the ifixpng plugin

Example – applying filters to .png for correct ie6 display

$(document).ready(function() {
// apply to all images
$(’img[@src$=.png]’).ifixpng();

// apply to target elements
$(’img[@src$=.png], div#header’).ifixpng();
});
This fix also has its limitations

Always defaults to “background-position:top left” and you cannot reposition it.
Also doesn’t work on repeated backgrounds
for more on this method checkout the demo page read more

Read more»