Dark alpha PNGs in Safari 2

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.