仅在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;

这些规则都没有帮助我...这非常奇怪，因为在Firefox或IE上，文本并不模糊...我不知道该怎么办...任何帮助将不胜感激。 https://jsfiddle.net/xtkak17y/28/

- colapsnux

---

你尝试过will-change吗？对我来说好像有帮助：https://jsfiddle.net/jmarikle/zfpL9oro/ - Joseph Marikle

看起来完美了，不再模糊了，我之前不知道这个 CSS 规则。谢谢你！ - colapsnux

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>

- Joseph Marikle