Search code examples
htmlcsssubpixel

disable subpixel aliasing on html/css borders

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?

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.