disable subpixel aliasing on html/css borders

Question

I'm using css transform:scale to scale some elements up, and now the borders, which were originally 1px solid black, get some subpixel rendering - 'antialiasing' - since they are now 1.4px or something. Exactly how it looks depends on the browser, but its blurry on all modern browsers.

Can I disable subpixel rendering for certain elements?

Answer 1

Ran into a similar issue with downscaling using transform: scale(ratio), except the borders would entirely dissapear on subpixel rendering instead of blurring.

Since I was in a similar use case (dynamic scaling with js), I decided to implement the javascript solution suggested in the comments by the original author:

container.style.transform = "scale(" + ratio + ")";
elementWithBorder.style.border = Math.ceil(1 / ratio) + "px solid lightgray";

In an upscaling situation I would however suggest Math.floor() to avoid 'fattening' the borders too much.

Answer 2

You can control text antialiasing on WebKit with this css: -webkit-font-smoothing: antialiased; And sometimes forcing 3d acceleration with something like: -webkit-transform: translate3d(0, 0, 0); helps aliasing as well ( at least when using rotate in my experience).

Answer 3

It's blurry because standard displays of 72 dpi can't render fractional pixel sizes, as I'm sure you understand. In addition, there is nothing within the spec to affect rendering or aliasing of borders.

A pixel width of 2 may give you better results, yet just about everything will blur.

Some retina devices and displays do support sub-pixel border widths but there are no consistent solutions when it comes to cross-browser support.

In my own testing, I found better results when scaling from a corner, as opposed to center by default. As well as stepping up in quarter or half amounts.

transform: scale(1.25);
transform-origin: left top;

Answer 4

Setting the perspective property seems to do the trick:

.subpixel-modal {
    transform: translate(-50%, -50%);
    perspective: 1px;
}