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?

Frisby

browser-specific solutions - eg css with vendor prefixes - are welcome too – Frisby

...if you use a CSS rule to transform/scale your elements, why don't you just adjust the borders in this same rule??? – Inwardness

I should have mentioned the scale was dynamic - done with javascript. I didnt try to adjust the border-width with the same javascript, eg border-width:0.71px or something - might have been a solution. – Frisby

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.

Pegu

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).

Joletta

Thanks, and correct, but I was asking for aliasing effects on non-text elements - specifically borders. these arent affected by -webkit-font-smoothing and the translateZ trick had no effect... – Frisby

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;

Izzo

Answer 4

Setting the perspective property seems to do the trick:

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

Wohlen

Does anyone know how this works? – Syzran

I also don't know why this works, but transform: perspective(0); and perspective: 0; seem to work as well. – Brott