1. ホーム
  2. google-chrome

[解決済み] cssの変形でクロームの縁がギザギザになる

2022-04-19 02:58:20

質問

私のウェブサイトでは、CSS3のtransformを使って、画像やボーダーのあるテキストボックスを回転させています。

問題は、Chromeではアンチエイリアスなしの(低解像度の)ゲームのように境界線がギザギザに見えることです。IE、Opera、FFではAAが使用されているため、はるかに良く見えます(まだはっきりと見えますが、それほど悪くはありません)。Macを持っていないので、Safariはテストできません。

回転した写真とテキスト自体は問題なく見え、ギザギザに見えるのは境界線だけです。

私が使っている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;