关于变换规模的摇摆不定的文本

Question

当我尝试在鼠标悬停时缩放div时,文本会抖动/抖动并且动画不平滑.这在FireFox中尤其明显,但也可以在Chrome中看到.

我可以做些什么改变来使动画流畅吗？

JS小提琴:https://jsfiddle.net/jL4dbxf9/

.mtw { 
  max-width: 200px;
  margin: 0 auto; 
}
.mt .mp {
  text-align: center;
}
.mt .mp .ma {
  color: #fff;
  font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;
  min-height: 60px;
}
.mt .header-blue {
  background: blue;
}
.mt {
  transition: all 0.4s linear;
}
.mt:hover{
  z-index: 1;	
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);	
}

<div class="mtw">
  <div class="mt">
    <div class="header-blue">
      <h2 class="mp">
        <span class="ma">49</span>
      </h2>
    </div>
  </div>
</div>

Answer 1

所以你在这里有很多事情,不幸的是,当你解决测量/排列过程,抗锯齿,硬件加速,透视等的一些细微差别时,浏览器之间需要各种各样的东西......

.mtw {
  max-width: 200px;
  margin:0 auto; 
}
.mt .mp { text-align: center }
.mt .mp .ma {
  color: #fff;
  font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;
  min-height: 60px;
}
.mp { margin: 0 }
.mt .header-blue {
  background: blue;
}
.mt {
  transition: all 0.4s linear;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}
.mt:hover {
  z-index: 1;
  -webkit-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
     -moz-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
       -o-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
      -ms-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
          transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
}

/* --- cleaner way --- */
#boom {
  color: #fff;
  background-color: blue;
  font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;
  min-height: 60px;
  max-width:200px;
  margin:0 auto;
  text-align: center;
  transition: transform 0.4s linear;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  will-change: transform;  
}
#boom:hover {	
  -webkit-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
     -moz-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
       -o-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
      -ms-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
          transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
}

/* --- Another way --- */
#weee {
  color: #fff;
  background-color: blue;
  font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;
  min-height: 60px;
  max-width:200px;
  margin:0 auto;
  text-align: center;
  transition: font-size 0.4s linear;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  will-change: font-size;
}
#weee:hover {
  font-size: 120px;
}

<div class="mtw">
  <div class="mt">
    <div class="header-blue">
      <h2 class="mp">
        <span class="ma">49</span>
      </h2>
    </div>
  </div>
</div>

<br/><br/>

Or, cleaner way....
<div id="boom">50</div>

<br/><br/>

Or, an entirely different way...
<div id="weee">51</div>

因此,如果我们查看更改,我们会看到添加了一些内容......

backface-visibility: hidden; =用户不关心背面,将其从合成器中删除...

-webkit-font-smoothing: subpixel-antialiased; =我确定字体很酷,但你重新尝试重新绘制所有像素特定的阴影垃圾顺利飞行....

translate3d( 0, 0, 0) ='ol hack在某些情况下强制硬件加速并让gpu帮忙.

margin: 0 =在您的h2上删除用户代理保证金垃圾而不考虑...

perspective(1px) =因为你正在改变,所以提醒它在哪里...

在这些希望之间你应该看到你期待的结果,希望它有所帮助,欢呼!

哦,只是一个快速的PS:你不需要那么多元素来完成同样的事情(除非你的例子比我们看到的更多),我会试着撼动这种习惯.一个元素和一些文本可以使用更清晰的DOM提供相同的结果,而对于合成器线程在执行其操作时需要关注的更少.

附录; 最终scale你将遇到分辨率损失,因为它正在使用光栅化在二维平面上调整元素尺寸及其子元素.避免模​​糊效果更大的东西被缩放是不可避免的(据我所知),除非你想让重构说出一个带缩放的画布,或者更容易对待实例它是什么而只是在这个场景中定位字体,因为它是唯一真正需要保持清醒的东西.因此,请参阅添加的示例,该示例将font-size定位为矢量.干杯!