CODEWITHSUNDEEP
cssgoogle-chromewebkittransform
galer88
galer88

Reputation: 240

Chrome: transform scale and blurred edges

How remove blurred edges from blue div? http://jsfiddle.net/p4raT/

<div id="testContainer" style="position: absolute; left: 0px; top: 0px; width: 1500px; height: 1500px; background: red; -webkit-transform-origin: 0% 0%;
-webkit-transform: scale(4.7);  ">      
<div id="testElement" style="position: absolute; left: 5px; top: 5px; width: 101px; height: 203px; background: blue;"><div> 
    <div>

Upvotes: 2

Views: 4213

Answers (2)

Leon Flame
Leon Flame

Reputation: 1

Recently I had same problem and found that solution that helped me

-webkit-font-smoothing: antialised;

or

backface-visibility: hidden;

Upvotes: 0

Miljan Puzović
Miljan Puzović

Reputation: 5820

You can add border: 1px solid blue; to #testElement but that is dirty solution, because border will be scaled too and I'm not sure how that will affect other elements.

See DEMO

Better solution is to add any webkit filter. For example -webkit-filter: blur(0px);.

See DEMO

This is some rendering bug in Chrome (maybe in other browsers too, not tested) and adding filters simply fixes that. I don't know how but it works.

Upvotes: 7

Related Questions