11

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?

Gottlieb Notschnabel
  • 9,408
  • 18
  • 74
  • 116
commonpike
  • 10,499
  • 4
  • 65
  • 58
  • browser-specific solutions - eg css with vendor prefixes - are welcome too – commonpike Apr 14 '13 at 10:27
  • 1
    ...if you use a CSS rule to transform/scale your elements, why don't you just adjust the borders in this same rule??? – Cholesterol Aug 08 '13 at 19:19
  • 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. – commonpike Aug 09 '13 at 20:25

4 Answers4

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.

Efulefu
  • 46
  • 7
0

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

Jan Drewniak
  • 1,316
  • 15
  • 18
  • 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... – commonpike Sep 27 '13 at 12:42
0

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;
Serg Chernata
  • 12,280
  • 6
  • 32
  • 50
0

Setting the perspective property seems to do the trick:

.subpixel-modal {
    transform: translate(-50%, -50%);
    perspective: 1px;
}
Tim
  • 2,805
  • 25
  • 21