使用变换比例时文本抖动

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

这是小提琴：https://jsfiddle.net/ad7n17so/ 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);
}

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>