Unexpected letter shaking in animated button

Question

I have an animated button with text Discover that moves 3px up on hover and then down on click. My issue is that letter i in Discover does some weird shaking from side to side on animation in Chrome browser. There is no issue with it in Firefox. It's not very apparent, but if you click a couple of times you can notice it. Is there any way to fix this shaking and what is causing it?

Here is 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>

Just a suggestion after googling a bit for "chrome css font rendering in animation" - https://stackoverflow.com/questions/11589985/webkit-text-aliasing-gets-weird-during-css3-animations though when playing around with it myself the suggested CSS doesn't fix it. https://stackoverflow.com/questions/10417890/css3-animations-with-transform-causes-blurred-elements-on-webkit also seems relevant though. — WOUNDEDStevenJones, Sep 13 '19 at 17:01

WOUNDEDStevenJones · Accepted Answer · 2019-09-13T17:18:14.887

It appears to be related to: How to force re-render after a WebKit 3D transform in Safari. Per the top answer, they suggest switching to non-3D transforms.

A working solution requires changing the CSS from a 3D animation to adjusting the top value as described at: CSS Transition doesn't work with top, bottom, left, right

So if you adjust your CSS to the following it should work:

* {
  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>

thanks, that might be a solution . I just need to try to process all that data. — Noob, Sep 13 '19 at 17:14
@Noob good to hear - that was kind of a fun one to track down! — WOUNDEDStevenJones, Sep 13 '19 at 17:22

score 1 · Answer 2 · answered Sep 13 '19 at 21:14

Another possible solution is setting the backface-visibility of the button to hidden. Apparently webkit has sometimes problems, where the backface is shining through objects during animations. See the updated snippet below:

* {
  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>

Unexpected letter shaking in animated button

2 Answers2