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

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 2

对于有transform: scale(1.05)的摇晃/抖动图像的人来说，只是一个FYI：悬停在Firefox上，这解决了我的问题。

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

所以这完全是一个虚假的旋转Firefox黑客，可以阻止这种毛刺般的图像缩放效果。

Answer 3

在调整页面大小以测试响应性时，我注意到了同样的事情。文字变得模糊不清，还有一些图像。据我所知，在字体调整时无法解决这个问题。它不是动画字体大小的每个像素，而是补间动画。因此，动画的每一秒都看起来并不清晰。

Answer 4

我得到的一个快速解决方案是，如果不将其包装在其他组件中（假设在div内）并在那里应用样式，则与其直接应用变换/转换或要应用的任何样式，不如直接进行转换，如果您添加

，它会呈现更好的效果。

backface-visibility: hidden

到包装器组件，它变得更好！

使用变换比例

4 个答案: