Unnecessary blur effect while scaling element

Question

I'm trying to remove blur effect that is happening during scaling transition. Picture during transition is passable but this font transition is so ugly... Is there any method to fix it? I have tried with "translateY(0) translateZ(0)" but no effect at all. When the effect is done, everything is going back to normal.

.circlee
{
    display: inline-block;
    margin-right: 50px;
    /*margin-top: 200px;*/
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px black solid;
    background-image: url(http://lorempixel.com/200/200/);
    transition: all 1s ease-in-out;
}
.circlee:hover
{
transform: scale(1.15);
}

<div class="circlee">wwww</div>
<div class="circlee">xxxx</div>
<div class="circlee">ssss</div>

I've seen many posts (such as [this](http://stackoverflow.com/questions/12502234/how-to-prevent-webkit-text-rendering-change-during-css-transition)) where people suggest a couple of methods, though I've never found any effect — Ian Clark, May 06 '15 at 18:56
Is this a webkit only issue, or is it happening across all browsers? — Tim McClure, May 06 '15 at 18:56
Chrome in particular has poor transition rendering. There's probably not much you can do, but changing the text rendering of the font may help. https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering — isherwood, May 06 '15 at 18:56
I've tried using this code on other browsers. So far Opera has the best rendering transition. Chrome has in my opinion the worst so far, tho trying to at least reduce this effect to minimum.. — nehel, May 06 '15 at 19:07

KpTheConstructor · Answer 1 · 2015-05-07T01:50:20.633

From the looks of it your image is only 200px by 200px . The hover effect is causing the image to stretch which results to quality loss / blur. You can either get a higher quality image so when it stretches it doesn't lose quality for an example ...an image of 210px by 210px with a resolution of 72 pixels . OR you could make your circle 190px by 190px and scale it up to 200px on hover resulting in the exact size of your background image. OR just change the width and height on hover instead. Example:

.circlee
{
    display: inline-block;
    margin-right: 50px;
    /*margin-top: 200px;*/
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 2px black solid;
    background-image: url(http://lorempixel.com/200/200/);
    background-size:100% 100%;
    transition: all 1s ease-in-out;
}
.circlee:hover
{
 width:200px;
    height: 200px;
}

<div class="circlee">wwww</div>
<div class="circlee">xxxx</div>
<div class="circlee">ssss</div>

Works like butter!

Unnecessary blur effect while scaling element

1 Answers1