使用变换比例时文本抖动

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);
}

Answer 1

仅供那些在 Firefox 上使用

transform: scale(1.05)

:hover 时图像不稳定/紧张的人参考，这解决了我的问题。

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

所以这完全是一个假的旋转 Firefox 黑客，可以阻止这种有问题的图像缩放效果。

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>

Answer 3

我得到的一个快速解决方案是，不是直接应用转换/过渡或您正在应用的任何样式，如果您将其包装在其他组件中（假设在 div 内）并在那里应用样式，它会呈现得更好，它会如果添加

，渲染效果会更好并且更出色

backface-visibility: hidden

对于包装组件，它会变得更好！

Answer 4

我在调整页面大小以测试响应能力时注意到了同样的事情。文字和一些图像都变得模糊。据我所知，由于字体正在调整，因此无法解决此问题。它不是对字体大小的每个像素进行动画处理，而是对动画进行补间。因此，动画的每一秒看起来都不太清晰。

Answer 5

你问这个问题已经有一段时间了，但经过一番搜索后，我找到了解决方案，只需将“will-change-transform”添加到包含文本的 div 中即可。顺便说一句，我正在使用 Edge。

will-change: transform;

或者如果您像我一样使用顺风：

<div className='will-change-transform'> Text </div>