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？
以下示例：
11 个答案:
答案 0 :(得分：374)
如果有人在稍后搜索此内容，那么摆脱Chrome中CSS转换的锯齿状边缘的一个好方法就是添加值为-webkit-backface-visibility的CSS属性hidden。在我自己的测试中，这已经完全平滑了它们。希望有所帮助。
-webkit-backface-visibility: hidden;
答案 1 :(得分：106)
如果您使用的是transition而不是transform，则-webkit-backface-visibility: hidden;不起作用。在动画期间，透明png文件会出现锯齿状边缘。
为了解决这个问题，我使用了：outline: 1px solid transparent;
答案 2 :(得分：16)
尝试3D变换。这就像一个魅力！
/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(2deg);
答案 3 :(得分：7)
选择的答案（也没有任何其他答案）对我不起作用，但这样做：
img {outline:1px solid transparent;}
答案 4 :(得分：2)
我一直在使用-45deg的CSS3渐变问题。 background倾斜，严重的锯齿状，与原始帖子相似但更糟糕。所以我开始玩background-size。这会延长锯齿状，但它仍然存在。然后我读到其他人也有45度增量的问题，所以我从-45deg调整为-45.0001deg，问题解决了。
在下面的CSS中，background-size最初为30px，背景渐变的deg正好为-45deg，所有关键帧均为30px 0。< / p>
@-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;
}
答案 5 :(得分：1)
您可以使用模糊的box-shadows来屏蔽锯齿。使用-webkit-box-shadow而不是box-shadow将确保它不会影响非webkit浏览器。您可能希望检查Safari和移动webkit浏览器。
结果稍好一些，但与其他浏览器相比仍然不太好：
答案 6 :(得分：1)
考虑到我们在Chrome / Windows上遇到完全相同的问题，我们也会考虑使用我们的解决方案。
我们上面尝试过@stevenWatkins的解决方案，但仍然有“踩踏”。
而不是
-webkit-backface-visibility: hidden;
我们用过：
-webkit-backface-visibility: initial;
对我们来说，这就是诀窍
答案 7 :(得分：1)
在相关元素周围的div上添加以下内容为我修复了这个问题。
-webkit-transform-style: preserve-3d;
在我的案例中，锯齿状边缘出现在视频窗口周围。
答案 8 :(得分：0)
对我而言，透视CSS属性可以解决这个问题：
-webkit-perspective: 1000;
在我的情况下完全不合逻辑，因为我没有使用3D过渡，但仍然有效。
答案 9 :(得分：0)
适用于Chrome中的画布（第52版）
所有列出的答案都与图片有关。但我的问题是关于使用变换旋转的chrome（v.52）中的画布。它们变得锯齿状，所有这些方法都无济于事。
对我有用的解决方案：
- 每侧增加1 px的画布=＆gt;宽度和高度+2 px;
- 使用偏移+ 1px（位置1,1而不是0,0）绘制图像并固定大小（图像大小应比画布大小小2px）
- 应用所需的轮换
如此重要的代码阻止：
// 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并将以下css应用于此div：
overflow: hidden;
box-shadow: 0 0 1px rgba(255,255,255,0);
// Or
//outline:1px solid transparent;
旋转应该应用于此包装div。所列出的解决方案虽然有效，但修改很少。
这种解决方案的修改示例是：https://jsfiddle.net/tLbxgusx/2/
注意：请参阅“第三个”类的div样式。
答案 10 :(得分：0)
我在这里尝试了所有解决方案，但在我的情况下不起作用。但是使用
will-change: transform;
修复了锯齿问题。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？