web-dev-qa-db-ja.com

css変換、chromeのギザギザのエッジ

私はCSS3変換を使用して、Webサイト内の境界線を持つ画像とテキストボックスを回転させています。

問題は、アンチエイリアスのない（低解像度）ゲームのように、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を使用させますか？

以下の例：

Jagged Edges example

cssgoogle-chromecss3transformantialiasing
184
dtech

後でこれを探している人がいる場合、ChromeのCSS変換でギザギザのエッジを取り除く素敵なトリックは、CSSプロパティ-webkit-backface-visibilityにhiddenの値を追加することです。私自身のテストでは、これで完全にスムーズになりました。お役に立てば幸いです。

-webkit-backface-visibility: hidden;
374
Neven

transitionの代わりにtransformを使用している場合、-webkit-backface-visibility: hidden;は機能しません。透明なpngファイルのアニメーション中にギザギザのエッジが表示されます。

それを解決するために使用しました：outline: 1px solid transparent;

107
mhhorizon

1pxの透明な境界線を追加すると、アンチエイリアスがトリガーされます

outline: 1px solid transparent;

または、1pxの透明なボックスシャドウを追加します。

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

3D変換を試してください。これは魅力のように機能します！

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

選択された回答（または他の回答のいずれも）は私にはうまくいきませんでしたが、これはうまくいきました：

img {outline:1px solid transparent;}

8
chris

-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;
        }
2
Pegues

Chrome/Windowsでもまったく同じ問題があったので、私たちもソリューションを投入すると思いました。

上記の@stevenWatkinsによる解決策を試しましたが、まだ「ステップ」がありました。

の代わりに

-webkit-backface-visibility: hidden;

使用したもの：

-webkit-backface-visibility: initial;

私たちにとって、これはトリックですか????

1
Nicholas McCreath

問題の要素を囲むdivに以下を追加すると、これが修正されました。

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

私の場合、ビデオウィンドウの周囲にギザギザのエッジが表示されていました。

1
chaser7016

ぼやけた box-shadows を使用して、ジャギングをマスクできる場合があります。 box-shadowの代わりに-webkit-box-shadowを使用すると、非Webkitブラウザーに影響しないようになります。ただし、SafariとモバイルWebkitブラウザーを確認することをお勧めします。

結果は多少良くなりますが、それでも他のブラウザよりもはるかに良くありません：

with box shadow (underside)

1
dtech

Chrome（バージョン52）のキャンバスの場合

リストされている答えはすべて画像に関するものです。しかし、私の問題は、変換回転を使用したchrome（v.52）のキャンバスに関するものです。それらはギザギザになり、この方法はすべて役に立ちません。

私のために働く解決策：

  1. キャンバスを各辺1ピクセルずつ大きくします=>幅と高さで+2ピクセル。
  2. オフセット+ 1px（0,0の代わりに位置1,1）と固定サイズ（画像のサイズはキャンバスのサイズより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>

サンプル：https://jsfiddle.net/tLbxgusx/1/

注：私のプロジェクトの簡易バージョンであるため、多くのネストされたdivがあります。

この問題は、Firefoxでも再現されます。 SafariやFFでの網膜にはこのような問題はありません。

そして、その他の解決策は、キャンバスを同じサイズのdivに配置し、このdivに次のCSSを適用することです：

overflow: hidden;
box-shadow: 0 0 1px rgba(255,255,255,0);
// Or
//outline:1px solid transparent;

そして、このラッピングdivに回転を適用する必要があります。したがって、リストされているソリューションは機能しますが、わずかな修正が必要です。

そして、そのようなソリューションの変更例は次のとおりです。 https://jsfiddle.net/tLbxgusx/2/

注：クラス「third」のdivのスタイルを参照してください。

0
Kiryl

私にとっては、視点のCSSプロパティがトリックを行いました。

-webkit-perspective: 1000;

私の場合、3Dトランジションを使用しないので完全に非論理的ですが、それでも動作します。

0
Aron