Transform scale text blurry only on chrome

css, javascript, velocity.js

Solution

Looks like the `will-change` style rule will accomplish what you're after.

$elem = $('.section');

$elem.hover(
 function() {
  $elem.velocity({ 
   scale: [1, 0.8]
    }, 300, "ease-in-out");
  }, function() {
    $elem.velocity({ 
     scale: [0.8]
    }, 300, "ease-in-out");
 });

#main { 
  margin:2em auto; 
  border:2px solid #000000;
    -webkit-font-smoothing: subpixel-antialiased;
  -webkit-perspective: 1000;
  -moz-osx-font-smoothing: grayscale;
}
.section { 
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  width:300px; 
  height:300px; 
  margin:2em auto; 
  border:3px solid red; 
  text-align:center; 
  color:#000000;
  z-index:9999;
  font-size:1.2em;
  /* Transform */
 -webkit-transform: scale(.8);
 -moz-transform: scale(0.8, 0.8);
 -ms-transform: scale(0.8, 0.8);
 -o-transform: scale(0.8, 0.8);
 transform: scale(0.8, 0.8);
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-perspective: 1000;
  -moz-osx-font-smoothing: grayscale;
  will-change: auto;
}

.content { 
  display:inline-block; 
  padding:15px;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<div id="main">
  <div class="section">
     <div class="content">
        <h3 style='color:red;'>Hover me</h3>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry
     </div>
  </div>
</div>

Problem

I'm using a scale animation with velocity.js to scale a div from `translate:scale(0.8, 0.8)` to `translate:scale(1, 1)` and I tried many ways to have the text not blurred on the first time when the container is not yet hovered on chrome but i'm not able to make this text not blurred.. I tried to put this rules one by one or combined in the container which being scaled : - `backface-visibility: hidden;` - `-webkit-filter: blur(0);` - `transform: perspective(1px) scale(0.8, 0.8);` - `transform: translateZ(0) scale(0.8, 0.8);` - `backface-visibility: hidden;` - `-webkit-font-smoothing: subpixel-antialiased;` - `-webkit-perspective: 1000;` None of these rules helped me... its very strange because on firefox or IE the text is not blurred... I don't know what I can do .. Any help would be appreciated https://jsfiddle.net/xtkak17y/28/

Original source