使用transform scale时文本抖动。

Question

我正在尝试在鼠标悬停时缩放一个按钮的大小，但这样做会使文本看起来很抖动。我查看了其他帖子并尝试了一些建议，例如使用-webkit-backface-visibility:hidden;、transform: translateZ(0);和-webkit-transform-style: preserve-3d;，但都没有起作用。

以下是示例链接：https://jsfiddle.net/ad7n17so/ （如果使用Firefox，则可能会有所不同）

.button {
  margin-left: 30px;
  background: #FF0000;
  color: #FFFFFF;
  padding: 0.4em;
  width: 100px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
.button:hover {
  -ms-transform: scale(1.25); /* IE 9 */
  -webkit-transform: scale(1.25); /* Chrome, Safari, Opera */
  transform: scale(1.25);
}

- MultiDev

---

你尝试过将填充从em改为像素或百分比吗？ - Sravan S

@SravanS 是的，我刚刚使用 px 更新了一个小程序，但仍然遇到了同样的问题。 - MultiDev

Answer 1

提醒一下在使用transform: scale(1.05)时出现抖动/晃动图片的用户，这个问题可以通过Firefox来解决。

transform: scale(1.05) rotate(0.02deg);

所以这只是一个伪装的Firefox旋转hack，可以阻止这种不稳定的图像缩放效果。

- mateostabio

---

做到了。接受的解决方案并没有完全修复问题，子元素仍然感觉不稳定。 - Etienne Martin

五年后 - 这修复了甚至在Chrome中的抖动过渡！ - undefined

Answer 2

backface-visibility: hidden;可以改善情况，但文本渲染仍然奇怪（在Firefox上呈现为锐利，而在Chrome上则模糊）。通过删除填充并使用更大的行高，此问题变得较小（主要是在Chrome上）：

.button {
  background: tomato;
  width: 100px;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
  line-height: 1.8em;  
}

.button:hover {
   -webkit-transform: scale(1.25);
   -moz-transform: scale(1.25);
   -o-transform: scale(1.25);
   -ms-transform: scale(1.25);
   transform: scale(1.25);
}

<div class="button">Test Button</div>

- L777

---

我已经将您的建议添加到了这个代码片段中，但是结果并没有改变：https://jsfiddle.net/ad7n17so/8/ - MultiDev

Answer 3

我注意到在调整页面大小以测试响应性时，会出现相同的情况。文本变得模糊不清，一些图像也是如此。据我所知，由于字体正在调整，没有办法修复这个问题。它不是通过动画化每个像素的字体大小来实现的，而是通过缓动动画来实现的。因此，在动画的每一秒钟内，它看起来并不清晰。

- user5428937

Answer 4

一个快速的解决方案是，不要直接应用转换/过渡或任何你正在应用的样式，如果你将它包装在其他组件中（比如 div 中）并在那里应用样式，它会呈现得更好。如果你在包装组件中添加 backface-visibility: hidden，效果会更好！

- Summy Sumanth