4 ms·
Ah my eyes, the aliasing. If anybody's interested why there's aliasing it's important to know how CSS transforms work. If you transform, the browser lifts the
by pyalot2 13y ago
Ah my eyes, the aliasing.
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).
- TimPietrusky 13y agoSo what do you suggest I should change? Thanks in advance.
- pyalot2 13y agoWell in CSS you can't do anything about it, that's just how the browser works. 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).
- ghayes 13y agoIs this to say that CSS 3D transformations on text are bound to be aliased [in similar circumstances]? Is there a suggestion to the spec such as a "mipmap hint" that could (one day) be added to reduce this flaw without the need for other technologies?
- derefr 13y ago> draw fonts by rasterizing (in the fragment shader) the bezier curves 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?
- deleted 13y ago[deleted]
- gnoway 13y agoCould be the speed, content, or something else, but the text at http://fotcorn.github.io/StarRSS/ http://fotcorn.github.io/StarRSS/ doesn't seem to shake (as much, anyway) as it fades.
- ygra 13y agoExhibits exactly the same issue here. Horrible flickering of horizontal lines because those alternate between being a pixel and no pixel wide.
- jcampbell1 13y agoYou could make everything oversized, then apply a scale of .25. That will improve the aliasing a bit. Same for the logo. The scale transform should never exceed 1.0.
- lookingsideways 13y agoAre you able to upload a screenshot of the aliasing problem somewhere? Running on a retina MBP, both Safari and Chrome render the text pin-sharp with no noticeable aliasing.
- deleted 13y ago[deleted]
- kaoD 13y agohttp://i.imgur.com/UzZYLW5.png http://i.imgur.com/UzZYLW5.png Check the farthest text. It's even worse in motion because the aliasing changes discretely.
- leokun 13y agoIt looks fine on a Retina MBP. The farthest text gets a little tiny bit of flickering maybe, but it looks sharp all the way until it fades out. Nothing like that.
- ygra 13y agoThe flickering is what kaoD referred to with discretely changing aliasing. It shouldn't happen, ideally. Small pixels make it a little less jarring but still noticeable.
- chiph 13y agoSpeaking as an old guy who saw Star Wars in the theater, it looked like that in 1977 as well. Not because of aliasing problems, but because they hit the resolution of the 35mm film and transfer process.
- ggchappell 13y agoYup. OTOH, the errors didn't change discretely as the text moved.
- Pxtl 13y agoHeh, it still feels wonderfully retro, but instead of evoking the original Star Wars, it evokes the old early-'90s PC games like X-Wing.