CSS 文本抖动 firefox

Posted 2023-03-06

【中文标题】CSS 文本抖动 firefox

【英文标题】：CSS text shaking firefox

【发布时间】：2019-06-28 03:47:01

【问题描述】：

我正在制作一个按钮的动画，并在 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>

【问题讨论】：

你是对的，sn-p 没有显示任何明显的抖动（我使用的是 Firefox）。如果你使用 Codepen，你能在那里重现问题吗？

在firefox中将animation-duration加1s并查看，在transform动画中可以看到摇晃...

这不是交互问题吗？当您将其悬停时移动它时，您可能会将按钮从光标下方移出，这会使您处于开关循环中，因为它会反复切换:hover。一个不错的解决方案是不移动的包装元素，当悬停时，将样式应用于子按钮。

@MarsAndBack 对不起，我没有使用它

@DBS 它不是：在我悬停按钮后，文本会发生很多变化

【参考方案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>

【讨论】：

感谢您的快速响应，虽然以这种方式动画没有发生，但我通过增加给它的时间注意到它，它并没有改变

哦，好吧，现在我知道你的意思了...哎呀

很抱歉正在播放动画，但显然只是为了阴影

@Johnson 现在怎么样？

@Johnson 根据您在问题中的编辑 - 即使没有 text-box translate 样式，您在 Firefox 中也会遇到 shaking 问题...