☰

CSS変換、Chromeのギザギザのエッジ 質問する

tag-icon • tag-icon google-chrome css transform antialiasing
CSS変換、Chromeのギザギザのエッジ 質問する

私は、Web サイト内の境界線のある画像とテキスト ボックスを回転するために CSS3 変換を使用しています。

問題は、Chrome では境界がギザギザに見えることです。アンチエイリアシングのない (低解像度の) ゲームのように。IE、Opera、FF では、アンチエイリアシングが使用されているため、はるかに見栄えがよくなります (それでもはっきりと見えますが、それほど悪くはありません)。私は 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 の使用を強制するなどです。

以下に例を示します。

ギザギザのエッジの例

ベストアンサー1

後で誰かがこれを検索する場合に備えて、Chrome での CSS 変換のギザギザのエッジを取り除くための便利な方法は、-webkit-backface-visibilityの値を持つCSS プロパティを追加することですhidden。私自身のテストでは、これでエッジが完全に滑らかになりました。

-webkit-backface-visibility: hidden;

おすすめ記事