CODEWITHSUNDEEP
csstransform
ganjeii
ganjeii

Reputation: 1178

Blurred text *during* css transform - Chrome

Hello I've been fighting with this for a while. I have a button (happens even with a div w/ text inside) that I'm trying to transform just slightly. During the transform the text shows blurry then kind of pops back into focus. Is there any way to just have the text stay the same size?? Or have it render during the transform??

I've tried the rotate(0.02deg) as you can see below. Also tried -webkit-transform: translateZ(0px) AND -webkit-backface-visibility: hidden none of which give me just a smooth text transition in chrome.

    .smooth-pop:hover {   
    -webkit-backface-visibility: hidden;
    -webkit-transform:scale(1.1) rotate(0.02deg);     
    transform: scale(1.1) rotate(0.02deg);        
}

Viewing the code snippet below gives an idea of what is happening. This contains all of my CSS for this functionality as well. It seems to be OK in IE.

.smooth-pop {
  position: relative;
  display: inline-block;
  border-radius: 4px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  /*-webkit-font-smoothing: antialiased;*/
}
.smooth-pop::after {
  box-shadow: 0 5px 15px rgba(0, 0, 0, .20);
  content: "";
  border-radius: 4px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.smooth-pop:hover {
  -webkit-backface-visibility: hidden;
  -webkit-transform: scale(1.1) rotate(0.02deg);
  transform: scale(1.1) rotate(0.02deg);
  /*-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .20);*/
}
.smooth-pop:hover::after {
  opacity: 1;
}
<div class="smooth-pop" style="width:50px; height:50px; border:1px solid black">
  test
</div>

Upvotes: 1

Views: 1115

Answers (1)

Dylan Wijnen
Dylan Wijnen

Reputation: 219

This is due to using the CSS transform property. Using it blurs the element for a better transition i'd suggest transforming the width and height of you're box instead of using the transform property.

Upvotes: 2

Related Questions