CODEWITHSUNDEEP
htmlcsssubpixel
commonpike
commonpike

Reputation: 11185

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?

Upvotes: 11

Views: 8495

Answers (4)

Tim
Tim

Reputation: 3198

Setting the perspective property seems to do the trick:

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

Upvotes: 0

Efulefu
Efulefu

Reputation: 46

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.

Upvotes: 1

Serg Chernata
Serg Chernata

Reputation: 12400

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;

Upvotes: 0

Jan Drewniak
Jan Drewniak

Reputation: 1394

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

Upvotes: 0

Related Questions