私は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を使用させますか?
以下の例:
後でこれを探している人がいる場合、ChromeのCSS変換でギザギザのエッジを取り除く素敵なトリックは、CSSプロパティ-webkit-backface-visibility
にhidden
の値を追加することです。私自身のテストでは、これで完全にスムーズになりました。お役に立てば幸いです。
-webkit-backface-visibility: hidden;
transition
の代わりにtransform
を使用している場合、-webkit-backface-visibility: hidden;
は機能しません。透明なpngファイルのアニメーション中にギザギザのエッジが表示されます。
それを解決するために使用しました:outline: 1px solid transparent;
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);
選択された回答(または他の回答のいずれも)は私にはうまくいきませんでしたが、これはうまくいきました:img {outline:1px solid transparent;}
-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;
}
Chrome/Windowsでもまったく同じ問題があったので、私たちもソリューションを投入すると思いました。
上記の@stevenWatkinsによる解決策を試しましたが、まだ「ステップ」がありました。
の代わりに
-webkit-backface-visibility: hidden;
使用したもの:
-webkit-backface-visibility: initial;
私たちにとって、これはトリックですか????
問題の要素を囲むdivに以下を追加すると、これが修正されました。
-webkit-transform-style: preserve-3d;
私の場合、ビデオウィンドウの周囲にギザギザのエッジが表示されていました。
ぼやけた box-shadows を使用して、ジャギングをマスクできる場合があります。 box-shadowの代わりに-webkit-box-shadowを使用すると、非Webkitブラウザーに影響しないようになります。ただし、SafariとモバイルWebkitブラウザーを確認することをお勧めします。
結果は多少良くなりますが、それでも他のブラウザよりもはるかに良くありません:
リストされている答えはすべて画像に関するものです。しかし、私の問題は、変換回転を使用したchrome(v.52)のキャンバスに関するものです。それらはギザギザになり、この方法はすべて役に立ちません。
私のために働く解決策:
とても重要なコードブロック:
// 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のスタイルを参照してください。
私にとっては、視点のCSSプロパティがトリックを行いました。
-webkit-perspective: 1000;
私の場合、3Dトランジションを使用しないので完全に非論理的ですが、それでも動作します。