It appears that the HTML/CSS engine automatically rounds values to the nearest whole px
unit. It would be interesting to see non-discrete sizing options (floats).
A closer look reveals that in Chrome, widths/heights are rounded to the nearest physical pixel. Zooming in allows for more physical pixels to alias to, resulting in a closer match to specified decimal sizes. For a demonstration, visit https://jsfiddle.net/yu55vk1p/1. Initially, a div with size 0.25 may appear as having a width of 0px, but after zooming in, the differing sizes become visible.
In light of these findings, it raises the question of whether anti-aliasing is possible. It seems that by default, this feature is not available.
Further investigation shows that applying anti-aliasing using CSS transform does have an effect, but it is applied to content still aliased to physical pixels in the 2D space. A comparison between two examples:
With a transform translate of 1.5px
, visible divs may appear fuzzy as they lie between two pixels in the 3D space. The rendering suggests that the 2-dimensional output is first aliased to physical pixels before being converted to a texture and then anti-aliased.
Despite recommendations to enable anti-aliasing with transforms, it doesn't seem to affect the initial 2D rasterization process.
The question remains: can we achieve 2D rasterization prior to sending textures to 3D rendering?