Discovered source of nasty Opera bug
What's the first thing that comes to mind when you hear the word "Opera"? Is it a long, boring series of songs that you can't understand the words to?
If that's the case, then you really need to check out the Opera web browser, which happens to be a nice alternative browser. It may end up becoming your favorite, because it is very fast and features unique and picturesque graphics.
Opera is sort of at the low end of the top-tier of web browsers. It's been around for years and is feature-rich, but it suffered for a long time because the company that created it tried to charge money for it. Opera does have a loyal following though.
There aren't a ton of people using Opera to browse Lottery Post, but there are always some Opera users online, so I try to make sure LP works OK in that browser.
For the longest time I've been struggling to figure out why Opera was not displaying images on Lottery Post correctly. It mainly affected things like bullets, toolbar buttons, command buttons — basically the small graphic elements. They would be displayed as repeated images, or mis-sized, or in the wrong place.
I must have gone through the style code a million times to figure out the cause of the problem. I researched the Internet for others who may have had a similar problem, and scoured all my reference books to be sure every line of CSS style code was up to spec.
Nothing I tried had any effect. The images continued to display properly in every web browser — except Opera. What a nightmare!
Then I started noticing that there were a few buttons where the image was being shown correctly. For example, the "Delete" button on a forum post had the red "X" symbol in the right spot, perfectly sized, and not repeating. Right next to it, every other button was messed up.
So of course my first step was to examine the code to see what I was doing differently to the Delete button. But the code was identical to all the other buttons! Grrrrr.....
Sitting here writing this, I can't remember why I did it, but I guess for s**ts and giggles I opened one of the messed-up images and re-saved it. At that point the image for that button started appearing properly! HUH?!
I racked my brain to figure out why the heck re-saving the file would have any effect to the way Opera displays images. The only possible explanation is that I had optimized all the GIF image files, to make them as small as possible, and Opera cannot handle the optimizations.
I know the software I used manipulates the graphics palette embedded in the file as part of its optimizations, so my guess is that Opera cannot handle advanced GIF palette optimizations. It seems to get tripped up by transparent edges on the optimized images. (Optimized images with no transparency appear normally in Opera.)
The strange thing is that I can't find any information about this specific bug on the web. I see lots of blogs and forums posts about background image bugs in Opera, but nothing that talks to this specific issue. So they always say if you find something, blog about it.
I can't remember exactly which GIF optimizer I used, but I'll post the name if I figure it out. They all pretty much work the same way, so i doubt the optimizer is at fault. Plus, the fact that the images work properly in every other web browser makes me think it's Opera's fault.
So to fix the problem I had to literally open and re-save every GIF image on Lottery Post, which is not quite as straight-forward as it sounds. A web site the size of Lottery Post that's almost 8 years old has a ton of images — all over the place.
And 50% of the time when you de-optimize images with palette manipulations, strange things happen to transparent portions of the images, like all the sudden turning black or some other color. So I had to re-draw by hand lots of images, pixel-by-pixel. Nothing inspires more grumpiness (not to mention an aching hand) than manipulating the pixels of a thousand images.
Now Opera users can now enjoy the same splendor of images as the rest of us!
