我一直在使用CSS3 transform來旋轉我的網站中帶有邊框的圖像和文本框。
問題是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？
下面的例子:
為了防止以后有人搜索這個，在Chrome中去掉CSS轉換的鋸齒狀邊緣的一個好辦法是添加CSS屬性-webkit-backface-visibility，值為hidden。在我自己的測試中，這已經完全消除了它們。
-webkit-backface-visibility: hidden;如果使用的是過渡而不是變換，-WebKit-back face-visibility:hidden；不工作。透明png文件在動畫過程中會出現鋸齒狀邊緣。
為了解決它，我使用了:輪廓:1px固體透明；
添加1px透明邊框將觸發抗鋸齒
outline: 1px solid transparent;或者，添加一個1px的透明框陰影。
box-shadow: 0 0 1px rgba(255,255,255,0);試試3d變換。這很管用！
/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(2deg);我已經嘗試了這里的所有解決方案，但在我的情況下都不起作用。但是使用
will-change: transform;修復鋸齒狀問題。
選擇的答案(或任何其他答案)對我不起作用，但這個對我有用: img {outline:1px純色透明；}
我一直有一個CSS3漸變為-45度的問題。背景傾斜，參差不齊，類似但比原來的職位更糟。所以我開始玩背景尺寸。這將延長鋸齒，但它仍然在那里。此外，我了解到其他人在45度增量時也有問題，所以我從-45度調整到-45.0001度，我的問題得到了解決。
在我下面的CSS中，背景大小最初是30px，背景漸變的度數正好是-45度，所有關鍵幀都是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;
}在有問題的元素周圍的div上添加以下代碼為我解決了這個問題。
-webkit-transform-style: preserve-3d;在我的情況下，視頻窗口周圍出現鋸齒狀邊緣。
你可以用模糊的陰影來掩蓋鋸齒。使用-webkit-box-shadow而不是box-shadow將確保它不會影響非webkit瀏覽器。不過，你可能想檢查一下Safari和mobile webkit瀏覽器。
結果稍微好一點，但仍然比其他瀏覽器差很多:
我只是想我們也可以提出我們的解決方案，因為我們在Chrome/Windows上也有同樣的問題。
我們嘗試了上面@stevenWatkins的解決方案，但仍然有“臺階”。
代替
-webkit-backface-visibility: hidden;我們使用了:
-webkit-backface-visibility: initial;對我們來說，這是成功的
對我來說，是透視CSS屬性起了作用:
-webkit-perspective: 1000;在我的例子中完全不合邏輯，因為我沒有使用3d過渡，但仍然有效。
所有列出的答案都是關于圖像的。但我的問題是關于帶有變換旋轉的chrome (v.52)畫布。它們變得參差不齊，所有這些方法都無濟于事。
適合我的解決方案:
將畫布每邊放大1像素= >寬度和高度+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>對于safari 16.2，上述任何解決方案都不起作用。但是我嘗試了旋轉，它解決了這個問題。
transform: "rotatex(360deg)"在我的情況下，我有視頻元素的問題。