CSS按钮悬停使文本闪烁答案

【问题标题】：CSS button hover makes text blinkingCSS按钮悬停使文本闪烁
【发布时间】：2017-02-06 16:41:11
【问题描述】：

我的自定义样式表中有悬停按钮转换。它允许我从<a href> 或<div> 创建按钮。在此转换过程中，字体以奇怪的方式闪烁。你能告诉我为什么以及如何解决它吗？

这里是scss代码： https://gist.github.com/rafpiek/7e1b2df5690baa3b02e88eee10adfb98

和视频： 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;
}

&lt;button class="button"&gt;button&lt;/button&gt;

【问题讨论】：

How to prevent Webkit text rendering change during CSS transition的可能重复

标签： css html sass hover transform

【解决方案1】：

在 .button 中试试这个：

-webkit-font-smoothing: antialiased;

【讨论】：

你能把它标记为正确吗？收集 50 点声望点对我有很大帮助。

【解决方案2】：

这是由于浏览器在动画期间更改文本抗锯齿类型导致的 AFAIK（新的 GPU 隐式层）。

更多关于原因的信息和fixes在这里 -> How to prevent Webkit text rendering change during CSS transition

【讨论】：

【解决方案3】：

可以使用透视和 3d 比例缩小：

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

【讨论】：