动画按钮中意外的字母抖动

Question

我有一个带有文本 Discover 的动画按钮，它在悬停时向上移动 3px，然后在点击时向下移动。我的问题是 Discover 中的字母 i 在 Chrome 浏览器中的动画中左右晃动。在 Firefox 中没有问题。这不是很明显，但是如果您单击几次，您会注意到它。有什么办法可以解决这种震动，是什么原因造成的？

这里是codepen。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header {
  height: 95vh;
  background-image: linear-gradient(to right bottom, rgba(3, 119, 252, .8), rgba(3, 186, 252, .8));
  position: relative;
}

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

.btn:link,
.btn:visited {
  text-decoration: none;
  color: #777;
  padding: 15px 25px;
  background-color: white;
  display: inline-block;
  border-radius: 100px;
  transition: all .2s;
}

.btn:hover {
  transform: translateY(-3px)
}

.btn:active {
  transform: translateY(-1px)
}

<header>
  <div class="header__text-box">
    <a href="#" class="btn">Discover</a>
  </div>
</header>

Answer 1

它似乎与：How to force re-render after a WebKit 3D transform in Safari 有关。根据最佳答案，他们建议切换到非 3D 变换。

一个可行的解决方案需要将 CSS 从 3D 动画更改为调整 top 值，如下所述：CSS Transition doesn't work with top, bottom, left, right

因此，如果您将 CSS 调整为以下内容，它应该可以工作：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header{
  height: 95vh;
  background-image: linear-gradient(to right bottom, rgba(3, 119, 252, .8),rgba(3, 186, 252, .8));
  position: relative;
}

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

/* add general style for .btn */
.btn {
  position: relative;
  display: inline-block;
  transition: all .2s;
  top: 0;
}

.btn:link,
.btn:visited{
  text-decoration: none;
  color: #777;
  padding: 15px 25px;
  background-color: white;
  border-radius: 100px;
}

/* animate top */
.btn:hover{
  top: -3px;
}

.btn:active{
  top: -1px
}

<header>
  <div class="header__text-box">
    <a href="#" class="btn">Discover</a>
  </div>
</header>

Answer 2

另一种可能的解决方案是将按钮的backface-visibility 设置为hidden。显然 webkit 有时会出现问题，在动画过程中，背面会透过对象发光。请参阅下面更新的 sn-p：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header {
  height: 95vh;
  background-image: linear-gradient(to right bottom, rgba(3, 119, 252, .8), rgba(3, 186, 252, .8));
  position: relative;
}

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

.btn {
    -webkit-backface-visibility: hidden;
}

.btn:link,
.btn:visited {
  text-decoration: none;
  color: #777;
  padding: 15px 25px;
  background-color: white;
  display: inline-block;
  border-radius: 100px;
  transition: all .2s;
}

.btn:hover {
  transform: translateY(-3px)
}

.btn:active {
  transform: translateY(-1px)
}

<header>
  <div class="header__text-box">
    <a href="#" class="btn">Discover</a>
  </div>
</header>