10

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?

4

4 回答 4

1

使用 缩小比例时遇到了类似的问题transform: scale(ratio)，除了边界将在子像素渲染上完全消失而不是模糊。

由于我处于类似的用例（使用js动态缩放），我决定实现原作者评论中建议的javascript解决方案：

container.style.transform = "scale(" + ratio + ")";
elementWithBorder.style.border = Math.ceil(1 / ratio) + "px solid lightgray";

但是，在升级的情况下，我建议 Math.floor() 避免过多地“增肥”边界。

于 2020-05-06T09:30:38.877 回答
0

您可以使用以下 css 在 WebKit 上控制文本抗锯齿：-webkit-font-smoothing: antialiased; 有时会通过以下方式强制 3d 加速： -webkit-transform: translate3d(0, 0, 0); 也有助于混叠（至少在我的经验中使用旋转时）。

于 2013-09-26T21:51:56.530 回答
0

设置perspective属性似乎可以解决问题：

.subpixel-modal {
    transform: translate(-50%, -50%);
    perspective: 1px;
}
于 2021-05-27T09:58:29.457 回答
0

这很模糊，因为 72 dpi 的标准显示器无法呈现小数像素大小，我相信您理解。此外，规范中没有任何内容会影响边框的渲染或锯齿。

像素宽度为 2 可能会给您带来更好的结果，但几乎所有内容都会变得模糊。

一些视网膜设备和显示器确实支持亚像素边框宽度，但在跨浏览器支持方面没有一致的解决方案。

在我自己的测试中，我发现从角落缩放时效果更好，而不是默认情况下居中。以及增加四分之一或一半的数量。

transform: scale(1.25);
transform-origin: left top;
于 2017-01-30T19:09:26.987 回答