html - 变换比例上的不稳定文本

Question

当我尝试在鼠标悬停时缩放 div 时，文本会摇晃/抖动并且动画不流畅。这在 FireFox 中尤为明显，但在 Chrome 中也可以看到。

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

JS fiddle :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

所以你在这里有很多事情要做，不幸的是，当你处理测量/排列 channel 、抗锯齿、硬件加速、透视等的一些细微差别时，它需要浏览器之间的各种事情。 .

.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 时，您将遇到分辨率损失，因为它正在通过光栅化在 2d 平面上调整元素尺寸及其子元素的大小。避免模​​糊效果越大的东西被缩放是不可避免的(据我今天所知)，除非你想重构说一个带有缩放的 Canvas ，或者更容易但更容易地对待它的实例，而不是只在这个场景中定位字体，因为它是唯一真正需要保持清晰的东西。因此，请参阅添加的示例，该示例将 font-size 定位为矢量。干杯!