This is some simple JS which generates a few lines of text. It renders fine in FF, Chrome, Opera, and IE9, and badly in Safari (on Win7): the text has various artefacts, and generally looks like it’s shadowed. It actually looks much worse than this on my production site, but it’s secure so I can’t post a link.
The site originally had some limited text, and lots of complex graphics, and rendered well on all 5 browsers. I’ve added some more text, and it’s now unusable in Safari. I think it’s probably worse with transformations – try zooming the jsfiddle, and you’ll see that the artefacts appear and disappear depending on the zoom.
Any ideas? Is Safari just broken?
Having stroke on text is a heavier than just having filled text, so it’s very possible Safari took some shortcuts there (possibly for performance reasons) and made the rendering quality suffer as a consequence. But it might just be a normal bug as well.
Anyway, remove the stroke on the text and things should look better.