CSS变换，锯齿边缘在铬

我一直在使用CSS3变换旋转图片和文本框的边界在我的网站。

问题是，边界在Chrome中看起来参差不齐，就像一个(低分辨率)游戏没有反锯齿。在IE, Opera和FF中，它看起来要好得多，因为使用了AA(仍然清晰可见，但不是那么糟糕)。我无法测试Safari，因为我没有Mac电脑。

旋转的照片和文字本身看起来很好，只是边界看起来参差不齐。

我使用的CSS是这样的:

.rotate2deg {
transform: rotate(2deg);
-ms-transform: rotate(2deg); /* IE 9 */
-webkit-transform: rotate(2deg); /* Safari and Chrome */
-o-transform: rotate(2deg); /* Opera */
-moz-transform: rotate(2deg); /* Firefox */
}

有什么方法我可以解决这个问题，例如，通过强迫Chrome使用AA?

在下面的例子:

Jagged Edges example

130258 次浏览
小开

你可以使用ambiguous 框阴影来掩盖锯齿。使用-webkit-box-shadow代替box-shadow将确保它不会影响非webkit浏览器。不过，你可能想检查一下Safari和移动webkit浏览器。

结果稍微好一些，但仍然比其他浏览器差很多:

with box shadow (underside)

小开
最佳答案

以防以后有人搜索这个，在Chrome中消除CSS转换上的锯齿状边缘的一个好技巧是添加CSS属性-webkit-backface-visibility，值为hidden。在我自己的测试中，这完全消除了它们。希望这能有所帮助。

-webkit-backface-visibility: hidden;
小开

尝试3d变换。这招真是妙不可言!

/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(2deg);
小开

对我来说，透视CSS属性起了作用:

-webkit-perspective: 1000;

完全不合逻辑的在我的情况下，因为我没有使用3d过渡，但仍然工作。

小开

如果你使用的是transition而不是transform，那么-webkit-backface-visibility: hidden;将不起作用。在透明png文件的动画过程中会出现锯齿状边缘。

为了解决它，我使用:outline: 1px solid transparent;

小开
所选的答案(或任何其他答案)对我来说都不管用，但这个答案是:

img {outline:1px solid transparent;} < / p >
小开

我一直有一个问题与CSS3梯度与-45度。background倾斜，是严重参差不齐类似，但比原来的帖子。所以我开始玩background-size。这样会拉长锯齿状，但它仍然在那里。然后，我还读到其他人在45度增量时也有问题，所以我从-45deg调整到-45.0001deg，我的问题解决了。

在下面的CSS中，background-size最初是30px，背景渐变的deg恰好是-45deg，所有关键帧都是30px 0。

    @-webkit-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}


@-moz-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}


@-ms-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}


@-o-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}


@keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}


@-webkit-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}


@-moz-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}


@-ms-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}


@-o-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}


@keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}


.pro-bar-candy {
width: 100%;
height: 15px;


-webkit-border-radius:  3px;
-moz-border-radius:     3px;
border-radius:          3px;


background: rgb(187, 187, 187);
background: -moz-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -webkit-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -o-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -ms-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(
25%,
rgba(187, 187, 187, 1.00)
),
color-stop(
25%,
rgba(0, 0, 0, 0.00)
),
color-stop(
50%,
rgba(0, 0, 0, 0.00)
),
color-stop(
50%,
rgba(187, 187, 187, 1.00)
),
color-stop(
75%,
rgba(187, 187, 187, 1.00)
),
color-stop(
75%,
rgba(0, 0, 0, 0.00)
),
color-stop(
rgba(0, 0, 0, 0.00)
)
);


background-repeat: repeat-x;
-webkit-background-size:    60px 60px;
-moz-background-size:       60px 60px;
-o-background-size:         60px 60px;
background-size:            60px 60px;
}


.pro-bar-candy.candy-ltr {
-webkit-animation:  progressStripeLTR .6s linear infinite;
-moz-animation:     progressStripeLTR .6s linear infinite;
-ms-animation:      progressStripeLTR .6s linear infinite;
-o-animation:       progressStripeLTR .6s linear infinite;
animation:          progressStripeLTR .6s linear infinite;
}


.pro-bar-candy.candy-rtl {
-webkit-animation:  progressStripeRTL .6s linear infinite;
-moz-animation:     progressStripeRTL .6s linear infinite;
-ms-animation:      progressStripeRTL .6s linear infinite;
-o-animation:       progressStripeRTL .6s linear infinite;
animation:          progressStripeRTL .6s linear infinite;
}
小开

添加1px透明边框将触发抗锯齿

outline: 1px solid transparent;

或者，添加一个1px的透明盒子阴影。

box-shadow: 0 0 1px rgba(255,255,255,0);
小开

Chrome canvas (Version 52)

所有列出的答案都是关于图像的。但我的问题是关于画布在chrome(第52节)与变换旋转。它们变得参差不齐，所有这些方法都无济于事。

适合我的解决方案:

  1. 使画布每边增大1px =>+2像素的宽度和高度;
  2. 用偏移量+ 1px绘制图像(在位置1,1而不是0,0)和固定大小(图像的大小应该比画布的大小小2px)
  3. 应用所需的旋转

所以重要的代码块: 

// Unfixed version
ctx.drawImage(img, 0, 0, 335, 218);
// Fixed version
ctx.drawImage(img, 1, 1, 335, 218);
/* This style should be applied for fixed version */
canvas {
margin-left: -1px;
margin-top:-1px;
}        
<!--Unfixed version-->
<canvas width="335" height="218"></canvas>
<!--Fixed version-->
<canvas width="337" height="220"></canvas>

示例: https://jsfiddle.net/tLbxgusx/1/

注意:有很多嵌套的div，因为它是从我的项目简化版本。

这个问题为我重现Firefox也适用。 在Safari和FF上没有这样的问题

其他已建立的解决方案是将canvas放入相同大小的div中，并对该div应用以下css:

overflow: hidden;
box-shadow: 0 0 1px rgba(255,255,255,0);
// Or
//outline:1px solid transparent;

和旋转应该适用于这个包装div。所以列出的解决方案是工作，但与小的修改。

该解决方案的修改示例是:https://jsfiddle.net/tLbxgusx/2/

注意:参见带有类'third'的div样式。

小开

只是想我们也会抛出我们的解决方案，因为我们在Chrome/Windows上遇到了完全相同的问题。

我们尝试了上文@stevenWatkins的解决方案，但仍然存在“踏步”。

而不是

-webkit-backface-visibility: hidden;

我们使用:

-webkit-backface-visibility: initial;

对我们来说，这做到了🎉

小开

在有问题的元素周围的div上添加以下内容为我解决了这个问题。

-webkit-transform-style: preserve-3d;

在我的例子中，锯齿状的边缘出现在视频窗口周围。

小开

我已经尝试了这里所有的解决方案，但对我的情况都不起作用。但使用

will-change: transform;

修复了锯齿问题。


提交答案