CSS 文本抖动 firefox

Question

我正在制作一个按钮的动画，并在 Firefox 和 Chrome 中测试了动画。在 Chrome 中一切正常，但在 Firefox 中，文本在抖动。有什么我可以使用的 -moz 或其他东西来修复它吗？

当垃圾邮件点击它时应该很明显，尽管在 sn-p 中即使在 Firefox 上也不会这样做.....

编辑：经过一些试验和错误后，我发现问题出在我转换时的文本框中：translate(-50%, -50%)。你知道任何替代方案吗？我尝试了前 35% 的相对定位，但盒子的内容在之前被剪掉了

This is what I see。文字运动会随着缩放而变化，但我可以向您保证，它会在悬停后改变位置，即使视频中并不清楚。

.text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;    
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    
    transition: all 0.2s;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.20);
}

.btn-white {
    background-color: #fff;
    color: #777;
}

<div class="text-box">
  <a href="#" class="btn btn-white">Click me</a>
 </div>

Answer 1

我猜这是 Firefox 中的 渲染 问题 - 由于 animation-duration 很短，我想您可以使用以下内容：

您可以在 Firefox 中使用 transition: box-shadow 0.2s, transform 0.2s 代替 transition: all 0.2s 来解决这个问题 - 请参阅下面的演示：

.text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;    
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: box-shadow 0.2s, transform 0.2s; /* CHANGED */
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.20);
}

.btn-white {
    background-color: #fff;
    color: #777;
}

<div class="text-box">
  <a href="#" class="btn btn-white">Click me</a>
 </div>