CODEWITHSUNDEEP
cssgoogle-chrometransform
akkishore
akkishore

Reputation: 1090

Artifacts when css scaled in Chrome

Check this jsFiddle: http://jsfiddle.net/XXrSD/1/

Code also produced below:

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

You can see that Chrome leaves artifacts (gap between outer border and #head div) when scaled to 0.6 (and 0.3). But it looks good in Firefox. I guess its because of Chrome not being able to handle non-integer pixels. Is there something I can do to fix this?

Upvotes: 3

Views: 6113

Answers (1)

Rob
Rob

Reputation: 7099

This is happening because of the antialiasing being applied to the object edges when scaled. The browser incorrectly calculates the area that needs to be redrawn. The parts left behind are ghosts of the sections of the object that wasn't included in the area to be redrawn.

Adding -webkit-backface-visibility: hidden; when scaling/transforming objects will resolve these odd looking artifacts in Chrome.

Updated example: http://jsfiddle.net/robaldred/XXrSD/2/

Upvotes: 11

Related Questions