3

この jsFiddle を確認してください: http://jsfiddle.net/XXrSD/1/

以下のコードも生成されます。

HTML:

<div class="outer">
<div class="head">head</div>
<div>
    test
</div>
</div>

CSS:

.outer {
    border: 10px solid brown;
    margin: 10px;
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    -ms-transform: scale(0.6);
}

.head {
    height: 25px;
    background-color: brown;
}

0.6 (および 0.3) にスケーリングすると、Chrome でアーティファクト (外側の境界線と #head div の間のギャップ) が残ることがわかります。しかし、Firefoxでは見栄えがします。Chrome が整数以外のピクセルを処理できないことが原因だと思います。これを修正するためにできることはありますか?

4

1 に答える 1

10

これは、スケーリング時にオブジェクトのエッジにアンチエイリアシングが適用されるために発生します。ブラウザーは、再描画が必要な領域を誤って計算します。取り残された部分は、再描画される領域に含まれていなかったオブジェクトのセクションのゴーストです。

オブジェクトをスケーリング/変換するときに追加-webkit-backface-visibility: hidden;すると、Chrome でこれらの奇妙に見えるアーティファクトが解決されます。

更新された例: http://jsfiddle.net/robaldred/XXrSD/2/

于 2013-03-18T10:36:12.790 に答える