css变换，在铬中锯齿状的边缘

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

问题在于，Chrome浏览器中的边框看起来十分粗糙，就像没有抗锯齿function的（低分辨率）游戏一样。 在IE中，Opera和FF看起来好多了，因为使用了AA（这仍然清晰可见但并不那么糟糕）。 我无法testingSafari，因为我没有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？

示例如下：

Answer 1

如果有人在后面search，在Chrome中摆脱CSS转换锯齿状边缘的一个很好的诀窍就是添加CSS属性-webkit-backface-visibility ，其值为hidden 。 在我自己的testing中，这已经完全平滑了。 希望有所帮助。

 -webkit-backface-visibility: hidden; 

Answer 2

如果您正在使用transition而不是transform ， -webkit-backface-visibility: hidden; 不起作用。 透明PNG文件的animation过程中出现锯齿状的边缘。

为了解决这个问题，我使用了： outline: 1px solid transparent;

Answer 3

尝试3D变换。 这就像一个魅力！

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

Answer 4

select的答案（也不是其他任何答案）对我不起作用，但是这样做：

img {outline:1px solid transparent;}

Answer 5

添加一个1px的透明边框将触发消除锯齿

 outline: 1px solid transparent; 

或者，用填充颜色添加一个1像素的阴影。

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

Answer 6

您可以使用模糊的阴影遮蔽锯齿。 使用-webkit-box-shadow而不是box-shadow将确保它不会影响非webkit浏览器。 不过，您可能需要检查Safari和移动webkit浏览器。

结果稍微好一些，但是与其他浏览器相比还是不太好：

Answer 7

我一直在用-45deg的CSS3渐变问题。 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; } 

Answer 8

只是认为我们也会抛出我们的解决scheme，因为我们在Chrome / Windows上遇到同样的问题。

我们尝试了上面的@stevenWatkins的解决scheme，但仍然有“步进”。

代替

 -webkit-backface-visibility: hidden; 

我们用了：

 -webkit-backface-visibility: initial; 

对我们来说，这就是诀窍

Answer 9

对我来说，这是CSS的财产angular度做的伎俩：

 -webkit-perspective: 1000; 

在我的情况下完全不合逻辑，因为我不使用3d转换，但仍然有效。

Answer 10

对于Chrome中的canvas（版本52）

所有列出的答案是关于图像。 但我的问题是关于铬（v.52）与变换旋转的canvas。 他们变得参差不齐，所有这些方法都无济于事。

适合我的解决scheme：

1. 使canvas更大，每边1px => +2px，宽度和高度;
2. 绘制偏移+ 1px（在位置1,1而不是0,0）和固定大小（图像大小应小于canvas大小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> 

Answer 11

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

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

在我的情况下，video窗口周围出现锯齿状的边缘。