Skip to content

Instantly share code, notes, and snippets.

@tvandervossen
Created May 2, 2012 20:03
Show Gist options
  • Save tvandervossen/2579857 to your computer and use it in GitHub Desktop.
Save tvandervossen/2579857 to your computer and use it in GitHub Desktop.
It might be helpful to add that even though sub-pixel antialiasing is the default text rendering method on Macs with built-in LCD panels, using a third-party external screen can result in all text being rendered using greyscale antialiasing.
It’s also possible for users to switch to greyscale rendering system-wide by unchecking “Use LCD font smoothing when available” in the “General” System Preferences panel.
In Safari and Chrome you can control the antialiasing method by using the -webkit-font-smoothing CSS property which can be set to “subpixel-antialiased”, “antialiased” or even “none”.
On top of that; all text on a non-opaque Core Animation layer will always be rendered without sub-pixel antialiasing (because of the way the GPU does compositing). You can see an example of this in the menu bar when you enable “Translucent menu bar” in the “Desktop” System Preferences panel.
The latter is especially relevant for web pages which use CSS 3D transformations. Since these are hardware accelerated in Safari, text rendered on a HTML elements with a 3D transformation applied to it will use sub-pixel antialiasing when the background of the element is transparent. In other words, once a HTML element is moved onto a Core Animation layer, the antialiasing method of the text rendering might from sub-pixel to greyscale.
This can result in strange visual “jumps” when the text switches between sub-pixel and greyscale antialiasing at the beginning or end of a hardware accelerated transition. See https://vimeo.com/39836831 for an example of this.
Another interesting thing is that on iOS, the font rendering in Mobile Safari currently differs between portrait and landscape orientation, at least when the text is not rendered on a CA layer. You can see an example of this in the gif animation at http://stuff.vandervossen.net/temporary/identical-test.gif
Even though this seems to be a bug in iOS itself (see my report at http://openradar.appspot.com/11097956), it’s still something you might want to be aware of.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment