仅在chrome上变换缩放文本模糊

时间:2017-05-10 19:10:36

标签: javascript css css3 velocity.js

我正在使用带有velocity.js的缩放动画来将div从translate:scale(0.8, 0.8)缩放到translate:scale(1, 1)我尝试了多种方法让文本在第一次没有模糊时但却在铬上徘徊,但我不能让这个文字变得模糊不清......

我试图将这个规则逐个放入或合并到正在缩放的​​容器中:

  • 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;

这些规则都没有帮助我...它非常奇怪,因为在Firefox或IE上文字没有模糊......我不知道我能做什么..任何帮助都将不胜感激

https://jsfiddle.net/xtkak17y/28/

1 个答案:

答案 0 :(得分:3)

看起来will-change样式规则将完成您之后的工作。



$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>
&#13;
&#13;
&#13;