Way around font transparency issues on canvas in Safari 5.1 on Lion?

Having an issue where randomly on some machines, text in a canvas element will fail to fully render on Safari 5.1 in Lion. What I mean by that is that letters look like they fail to have a transparent background. This only happens on some machines, and sometimes the text is cleared up after a refresh. I'm just using fillText, and it should just be rendering Arial.

Anyone having the same issue and 开发者_运维百科able to come up with a workaround? I've tried to trigger a redraw by throwing in a 3D transform (rotate, etc) but no luck.

Here's screenshots (sorry about the quality, it's what I was sent, but you should get the idea) of the way correct rendering and sometimes bad safari rendering:

This is an hardware acceleration issue on Mac with ATI GPU.

We run the same code, drawing on a canvas: we had the issue in a Mac equipped with ATI graphic card; on a MacMini, instead (equipped with Intel GPU), the drawing was perfect.

If you check "Disable Canvas Accelerated Drawing" under Debug -> Drawing/Compositing flags in Safari menu, you will notice no more transparency errors around text.

Safari 6.0 (on Mac OS X 10.7.4) shows same transparency issue.

-- UPDATE --
After many investigations, we can say that it's not a GPU issue, but an Apple issue: the application of "Font Smoothing" on LCD monitors (AppleFontSmoothing setting).

In our observations, we test on two machines:
1 - Mac Mini with a Philips LCD
2 - iMac (with its own LCD monitor)

The first machine didn't show the issue because the system algorithm didn't recognize the monitor as an LCD monitor.
But forcing the AppleFontSmoothing with the command defaults -currentHost write -g AppleFontSmoothing -int 2, the issue blow out even on the Mac Mini too.

If you don't want your application to show the issue anymore (mantaining canvas hardware acceleration), you can set 'webkitFontSmoothing' property off on the canvas object:

var canvas = document.getElementById('my-canvas');
canvas.style.webkitFontSmoothing = "antialiased"

Assuming you have only a limited number of strings you want to use, one way is to use pre-rendered pngs instead of the fillText command. Doing so will actually result in a performance increase.

You should report this as a bug. I imagine it will get fixed soon enough.