使用转换比例时文本不稳定 [英] Shaky text when using transform scale

问题描述

我正在尝试缩放悬停按钮的大小，但是完成此操作后，文本看起来不稳定。我查看了其他帖子并尝试了一些建议，例如使用 -webkit-backface-visibility：hidden; ， transform：translateZ（0 ）; 和 -webkit-transform-style：3，preserve-3d; ，但似乎都不起作用。

I am trying to scale the size of a button on hover, but when this is done, the text looks shaky. I looked at some other posts and tried some of the suggestions, such as using -webkit-backface-visibility:hidden;, transform: translateZ(0); and -webkit-transform-style: preserve-3d;, but none seemed to work.

这是小提琴： https://jsfiddle.net/ad7n17so/

（如果使用，我使用的是Firefox）

(I am using Firefox, if that makes a difference)

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

推荐答案

backface-visibility：隐藏； 可以使情况更好，但是文本呈现仍然很奇怪（Firefox上为脆皮，Chrome上为Blurry）。这个问题变小了（主要在Chrome上），删除了填充并使用了更大的行高：

backface-visibility: hidden; let the situation better, but the text rendering remains weird (crispy at Firefox, Blurry on Chrome). This problem becomes smaller (mainly on Chrome) removing the padding and using a bigger line-height instead:

.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>

这篇关于使用转换比例时文本不稳定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！