disable subpixel aliasing on html/css borders

css, html, subpixel

Solution

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.

Problem

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?

Original source