CSS button hover makes text blinking

Question

I have button transformation on hover in my custom stylesheet. It allows me to create button from <a href> or <div>. During this transformation font is blinking in strange way. Could you kindly tell me why and how to solve it?

Here is the scss code: https://gist.github.com/rafpiek/7e1b2df5690baa3b02e88eee10adfb98

and the video: https://www.youtube.com/watch?v=4c4D96FukuQ&feature=youtu.be

.button {
  text-decoration: none;
  color: #ECECEC;
  font-size: 20px;
  height: 40px;
  width: 100px;
  background: #B3595F;
  display: inline-block;
  transition: all 0.30s linear;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px 3px;
  cursor: pointer;
  border-radius: 6px;
  user-select: none;
  font-weight: bold;
}
.button:-webkit-any-link {
  color: #ECECEC;
}
.button:hover {
  transform: scale(1.07);
  color: #ECECEC;
}
.button:active, .button:focus, .button:visited {
  text-decoration: none;
  color: #ECECEC;
}
.button.blue {
  background-color: #2C92FF;
}
.button.red {
  background-color: #FF2113;
}
.button.green {
  background-color: #1EBE32;
}

<button class="button">button</button>

Possible duplicate of [How to prevent Webkit text rendering change during CSS transition](http://stackoverflow.com/questions/12502234/how-to-prevent-webkit-text-rendering-change-during-css-transition) — Francesco, Feb 06 '17 at 17:27

score 1 · Accepted Answer · answered Feb 06 '17 at 17:01

1

Try this in .button:

-webkit-font-smoothing: antialiased;

answered Feb 06 '17 at 17:01

Gergely Papp

800
1
7
12

Could you please mark it as right? It'd help me a lot collecting my 50 reputation points. – Gergely Papp Feb 09 '17 at 10:48

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

This is caused AFAIK from the browser changing the text antialias type during the animation (new GPU implicit layer).

More info on causes and fixes here -> How to prevent Webkit text rendering change during CSS transition

edited May 23 '17 at 11:45

Community

1
1

answered Feb 06 '17 at 16:52

Francesco

555
4
23

score 0 · Answer 3 · answered Feb 06 '17 at 17:46

0

Can be reduced using perspective and 3d scale:

transform: perspective(1px) scale3d(1.07,1.07,1);

answered Feb 06 '17 at 17:46

Alejalapeno

1,008
7
11

CSS button hover makes text blinking

3 Answers3