Running on a retina MBP, both Safari and Chrome render the text pin-sharp with no noticeable aliasing.
Check the farthest text. It's even worse in motion because the aliasing changes discretely.
Thanks in advance.
If you'd be doing WebGL you can do some things like using square power of two textures and enabling mipmapping and if available anisotropic filtering.
You can also do things like using signed distance field fonts or draw fonts by rasterizing (in the fragment shader) the bezier curves, which can be made to nicely anti-alias (using standard derivatives).
There's no flag to control aliasing migitating strategies for CSS in the spec, nor is there any discussion about it as far as I know.
So, ideally, browsers would be doing this themselves, after applying the transform to any non-text in the texture, and then compositing with the combined texture?
Same for the logo. The scale transform should never exceed 1.0.
If anybody's interested why there's aliasing it's important to know how CSS transforms work. If you transform, the browser lifts the transformed rectangle into its own layer and renders its content to a texture. Then, later, it is composited with the page by blitting that texture with whatever transformation was applied.
So CSS transforms are an application of texturing. And in texturing what you do to avoid aliasing is mipmapping (you might also throw anisotropic filtering on top). However as the texture holding the rect the browser rendered isn't square power of two, some devices do not support mipmapping it. It is also quite slow to generate the mipmap for a texture every frame.
So with CSS transforms not being able to utilize mipmapping --> aliasing.
Now, in particular mipmapping text (that's supposed to be sharp) isn't even the best idea. It just gets blurry and looks unappealing (although that's better with anisotropic filtering, but then, anisotropic filtering is also expensive and not every device/GPU supports it).