The Hickensian

27.09.05 Dark alpha PNGs in Safari 2

20 comments
Tagged with: browsers, bug, png, safari

Here’s a weird one, and it only affects Safari 2 (Tiger), not even Safari 1.3 or earlier, or Omniweb (using the earlier rendering engine).

If you look at my ‘contact section’, or my live search function, I use an alpha png in the background to overlay a transparent white tint over the header image. In every other browser (except IE of course, which just gets a white background) this works just as I expect it to, but not in Safari 2. The effect is transparent grey – not white. Richard Rutter was kind enough to check in Safari 1.3 for me, and the png shows up fine.

Apart from Paul Haine, I couldn’t find anyone else that was experiencing this problem.

After a lot of experimentation however, it turned out that Safari just needs the repeating image to be at least 2px square, not 1px.

Here’s a comparison:

Screenshot of before, using a 1px square png, and after, using 2px

I hope this is useful to someone else, who may have come across this problem.

Comments | RSS

No.1

∞ Egor Kloos said 1627 days ago:

I’ve stoped using 1×1 px images since IE 4 and netscape 4. So I wouldn’t have come across it. Very useful to know in any case, and it’s a very odd bug. Thanks for the heads up.

No.2

∞ Chris Clark said 1627 days ago:

I recall reading some years ago that it’s best to avoid tiling such small images as it places unnecessary strain on the renderer, causing general page slowness and bad mojo. (This was before Safari’s time, incidentally, so don’t take that to be Safari-specific).

In cases such as this, a 1×1 monochrome PNG really doesn’t offer much in the way of a bandwidth saving over an identical 2×2 image (or even 10×10), so the bug shouldn’t crop up too often.

No.3

∞ Rudolf Vavruch said 1627 days ago:

For tall vertical background gradients, I’ve found 2 pixel wide instead of 1 pixel wide provides a smoother background on Windows browsers (haven’t tested anything else).

On the topic of off-colour PNGs, has anyone else noticed that Adobe Photoshop’s PNGs tend to be lighter than the original image? I use GIMP now to save out PNGs.

No.4

∞ Luke said 1627 days ago:

There are PhDs to be written in PNG colour variance. The people who wrote the PNG spec decided to include colour-sync properties into it, which in theory is a nice idea, but in effect has turned out to be disastrous. You simply cannot match colours between PNG images and GIF/CSS/JPEG images.

What you’ll find, if you do a bit of research is that the colour you see in a PNG is dependent on two things which can potentially result in at least four different possible interpretations of one “colour”.

I did a little case study and discovered that Firefox, Safari and IE all have different opinions on what a PNG should look like, and that it depends on what program you use to create the PNG. In addition, in the case of Photoshop at least, it even depends on how you save it. Firefox in particular seems to really noticeably change the colour.

Photoshop’s “Save for Web” command embeds a different colour profile from the normal “Save As…”. I think the latter is affected by your working profile in Photoshop whereas the former possibly uses the SRGB profile. Either way, you don’t get the colour you really wanted, you get something different.

PNG is nice for transparency effects and images where the “real” colour is insignificant, but it’s useless for colour matching if you add CSS or any other image format into the equation.

No.5

∞ Jordan Wollman said 1627 days ago:

Thanks for the info guys. I’d only heard about the 1×1 pixel issues once before, and never really verified it.

As for PNG, I try not to use them as a rule. At least until the masses can see them as well. I like Jon’s solution for his livesearch though.

No.6

∞ Wevah said 1627 days ago:

You can remove the gAMA (gamma) PNG header using pngcrush :

bq. pngcrush -rem gAMA infile.png outfile.png

This has the added benefit of reducing the size of the PNG as much as possible (which is pngcrush’s primary function, anyway). This shrinkage is often fairly significant; Photoshop’s PNG export isn’t as size-optimized as it could be.

No.7

∞ Wevah said 1627 days ago:

(Umm…the Textile blockquote works in the message preview, but not in the message itself….)

No.8

∞ Ryan said 1627 days ago:

I think you guys are being a bit to hard on adobe and png…the real culprit here is macs. PNG’s seem to work fine for me as long as I save them in PS or Fireworks on my PC. When I try to save on my mac, it’s virtually impossible to get the right color no matter which program (or method) I use to save or which browser I used to view the saved image.

This isn’t just a PNG problem either; countless problems seem to arise with jpeg as well. Being a photoblogger, this is quite annoying, which is why I use my PC for all my photo editing and web designing. Straight colors that come out correct every time.

Don’t get me wrong, I love macs, which are far superior in most areas, but color management is NOT one of them.

No.9

∞ ali bosworth said 1627 days ago:

“Donâ€™t get me wrong, I love macs, which are far superior in most areas, but color management is NOT one of them.”

Thats interesting, it seems to me i have often heard the opposite- that colour management is one of their strongpoints.
(this coming from someone who never uses macs)

Photoshop does (or at least did) have trouble compressing pngs as well as it should be able to, but there is a plugin ‘superpng’ that works wonderfully if you really need to use photoshop.

And regarding the fact that photoshop uses your working profile when you ‘save as’ and sRGB when you ‘save for web…’.... isnt that exactly what would be expected? it would hardly be very usefull if it saved your working profile ‘for the web’ would it? In any case, i have always ignored that save option compleatly, it seems to only be usefull if you lack any sense of what is required to create web appropriate images.

(hopefully this didnt submit twice….if so…why the long delay without any feedback as to a succesful submission?)

No.10

∞ Phill Kenoyer said 1627 days ago:

“Macs are not good at color management” -Ryan

Blaahahaha!

Anyway, save all your photos/graphics using “Save for Web” when using Photoshop and you will save yourself a lot of headaches. Two problems with using the regular Save or Save As are; Colors are wrong, and JPEGs will crash MSIE if the icon/preview is embedded.

As for PNG’s. I try to use them as much as possible just so that MSIE users will see big grey blobs where my nicely rendered alpha transparency graphics should be. Stupid MS.

And to get back on topic… 1×1px graphics are evil. Any 1×1 or 2×2 pixel graphic is a mistake in my book. With today’s modern browsers, there is no need for it.

No.11

∞ Phil Oye said 1627 days ago:

[I think my comment got eaten, let’s try again. Sorry if it dupes.]

#4: Luke,

Wow! That page is amazing. In my studio, everyone saw differences in the first set of swatches… in the same browser, Safari 2.

You’re right, there is definitely is a ColorSync thing going on. We don’t have a color managed workflow and all of our monitors are calibrated differently (I know, for shame). But it did show us that there are differences within the same browser, the same source graphic, but different color calibration settings for the computer viewing the source. Crazy.

Anyone want to teach me how to color manage an entire studio?

No.12

∞ Michael Heilemann said 1627 days ago:

What is so weird that you should mention this just now; this weekend I was battling this very bug! Good to see that I wasn’t just going coo-coo for coco pops… Ehm.

No.13

∞ oliver taylor said 1627 days ago:

Color management make me shutter. It seems to never work properly even when all the elements are in place telling you that it should work.

No.14

∞ Richard Rutter said 1627 days ago:

bq. “Any 1Ã—1 or 2Ã—2 pixel graphic is a mistake in my book. With todayâ€™s modern browsers, there is no need for it.”

Well actually there is, especially in the case Jon is illustrating here. One could apply some sort of cross-browser alpha transparency to the block but it would also make the text semi-transparent, which is not desirable. The only alternative at the moment AFAIK is to use an alpha-transparent png as a background, as Jon is doing here.

No.15

∞ Robin said 1626 days ago:

Well, ideally we’d be using RGBA background colours but seeing as only Safari supports them at the moment…

No.16

∞ Andrew Embler said 1626 days ago:

It’s funny – I would never have encountered such a bug, as I instinctively save all my web background graphics at at least 20 pixels, even if they’re solid colors.

I guess it dates back to when I was still producing sites meant to display completely on Netscape 4. On the Mac, web backgrounds that were too small displayed very slowly on Netscape. They seemed to slide onto the page, and while they were displaying, you couldn’t do anything else. They would typically repeat this behavior several times, and subsequently if you did anything like resize your browser.

Anyone else remember this? Maybe it was a product of my slow Mac, at the time, but I remember that being tremendously aggravating.

No.17

∞ Poncho said 1622 days ago:

bq. I guess it dates back to when I was still producing sites meant to display completely on Netscape 4. On the Mac, web backgrounds that were too small displayed very slowly on Netscape.
Andrew Embler

I’m with you there Andrew, I used to HATE Netscape 4. I also save out all repeating images at a decent size (nothing consistent or scientific, but more than say 10px) for no apparent reason.

On the PNG front, it really is no good these days. I had a masterpiece of a site mocked up in Photoshop recently, all signed off all ready to go. When I started to save out all the component graphics, the PNGs clashed with JPGS and css colours. PNGCrush helped a little but I ended up ditching some transparencies which broke my heart :(

No.18

∞ Timo Ganter said 1619 days ago:

Nice solution !
I wonder why Safari can not read the gamma value of an PNG image. Or maybe it dose and the png gamma value just have to be saved properly.

No.19

∞ Zeerus said 1615 days ago:

I never knew about the 1pixel problem, perhaps it has something to do with some of my more recent problems. On another note, your live search doesn’t work at all in IE. the results appear behind the banner image, instead of above it

No.20

∞ HaugenHaus said 1609 days ago:

has anyone used Photoshop CS2 to create semi-transperant .png’s?

it seems to me that adobe is now catering to IE when one uses the save for web feature, as it doesn’t allow semi-transperant .png’s. although i have never really liked Phhotoshop, and tend to use Gimp, my wife has PS CS2. CS1 didn’t seem to have this problem.