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?

示例如下:

锯齿边缘的例子

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

     -webkit-backface-visibility: hidden; 

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

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

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

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

    select的答案(也不是其他任何答案)对我不起作用,但是这样做:

    img {outline:1px solid transparent;}

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

     outline: 1px solid transparent; 

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

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

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

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

    与箱子阴影(下面)

    我一直在用-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; } 

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

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

    代替

     -webkit-backface-visibility: hidden; 

    我们用了:

     -webkit-backface-visibility: initial; 

    对我们来说,这就是诀窍

    对我来说,这是CSS的财产angular度做的伎俩:

     -webkit-perspective: 1000; 

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

    对于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> 

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

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

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