Search code examples
safarirenderingfont-face

Safari 5.0.x @font-face text can appear jagged?


So I'm working on a project (sorry, no link to provide) where in old versions of Safari @font-face text will sometimes appear jagged around the edges as if there's been no aliasing.

I've tried the standard text shadows and transform3D, but it doesn't seem to work. What's weird is the bugg is intermittent and if I do anything that causes the browser to re-draw the font then it comes back in perfectly. Such as changing the font size, etc. However, if anything else on the page interacts with it in such a way as to force it to redraw then it's back to jagged.

I'm guessing this is a browser/OS issue but I'd really like to fix it.

The font in question is coming from Google Web Fonts, if that helps. I'm probably going to try disabling it and running a local copy instead to see if that helps, but I don't have much hope there.


Solution

  • Turns out this is a pretty rare bug. The problem is a parent element has a font size of zero. I was using a textreplace method based on font: 0/0 a and removing that fixed my issue. I had to find an alternative, but there are loads so it wasn't an issue.