html - CSS 文本抖动 firefox

Question

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

当垃圾邮件点击它时应该很明显，尽管在代码片段中甚至在 Firefox 上也没有这样做......

编辑:经过一些试验和错误后，我发现问题出在转换时的文本框中:translate(-50%, -50%)。你知道其他选择吗？我尝试了top 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 很短，我想你可以使用以下方法:

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

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