design reverb

I don’t use the Opera web browser at all. I use Firefox for the most part, Safari sometimes. In fact I don’t even test designs in Opera, since it only shows up as less than 2% of visitors. Suddenly I’m getting a clients user commenting that some images in Opera weren’t showing up. I immediately downloaded the most recent version of the Opera browser and set about investigating what, if anything, was happening. To my surprise, some images were missing. I immediately thought it was perhaps some sort of ad blocker gone awry, but the ad blocker was turned off. I began to delve deeper. Turns out there isn’t much information to be had, or at least none that I could find during a casual search, so I set it aside thinking Opera was wigging out.

Fast forward two months later, I’m getting ready to roll out a semi-major update to the client site. For kicks I open Opera to see how it renders. I’m greeted with the whole page loading, and then images begin to disappear. Upon closer inspection, only the png images are disappearing.

So I begin a search on Google thinking it would take but a minute of my time. An hour later, I literally stumble onto a post on the Drupal site, where someone had run into the exact same problem. Apparently Opera thinks it’s IE sometimes and tries to use pngfix.js. Since Opera cannot use IE filters, it won’t render correctly, hence the missing png images. Alan Evans proposed a fix where the Opera user agent string is checked for the non-existence of Opera before executing the png fix.

To update and exclude Opera from using the png fix, we just add a couple of if statements to the original pngfix.js:

function correctPNG() {
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && navigator.userAgent.indexOf("Opera") == -1 && window.attachEvent) {
for(var i=0; i";
img.outerHTML = strNewHTML;
i--;
}
}
}
}
}
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && navigator.userAgent.indexOf("Opera") == -1 && window.attachEvent) {
window.attachEvent("onload", correctPNG);
}
}

And voilà! Opera no longer tries to run the function correctPNG and png files no longer disappear.

Download the Opera enhanced version of pngfix.js