CODEWITHSUNDEEP
javascriptcssvelocity.js
colapsnux
colapsnux

Reputation: 942

Transform scale text blurry only on chrome

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 :

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/

Upvotes: 3

Views: 5970

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78520

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>

Upvotes: 4

Related Questions