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

Question

我正在使用带有 velocity.js 的缩放动画将 div 从 translate:scale(0.8, 0.8) 缩放到 translate:scale(1, 1) 我尝试了很多方法来使文本不模糊第一次当容器还没有悬停在 chrome 但我无法使这个文本不模糊..

我试图将这些规则一个一个地放入或合并到正在缩放的容器中：

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 这些规则帮助了我......这很奇怪，因为在 firefox 或 IE 上文本不模糊......我不知道我能做什么......任何帮助将不胜感激

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

Answer 1

看起来 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>

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

Transform scale text blurry only on chrome

javascript

css

velocity.js