模糊文本*在* css 转换期间 - Chrome

Question

您好，我已经为此奋斗了一段时间。我有一个按钮（即使里面有一个带有文本的 div 也会发生），我正在尝试稍微改变它。在转换过程中，文本显示模糊，然后重新聚焦。有没有办法让文本保持相同的大小？还是在转换过程中渲染？？

我已经尝试了rotate(0.02deg)，如下所示。还尝试了 -webkit-transform: translateZ(0px) 和 -webkit-backface-visibility: hidden 都没有给我一个平滑的 chrome 文本过渡。

    .smooth-pop:hover {   
    -webkit-backface-visibility: hidden;
    -webkit-transform:scale(1.1) rotate(0.02deg);     
    transform: scale(1.1) rotate(0.02deg);        
}

查看下面的代码 sn-p 可以了解正在发生的事情。这也包含了我所有用于此功能的 CSS。 IE里好像没问题。

.smooth-pop {
  position: relative;
  display: inline-block;
  border-radius: 4px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  /*-webkit-font-smoothing: antialiased;*/
}
.smooth-pop::after {
  box-shadow: 0 5px 15px rgba(0, 0, 0, .20);
  content: "";
  border-radius: 4px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.smooth-pop:hover {
  -webkit-backface-visibility: hidden;
  -webkit-transform: scale(1.1) rotate(0.02deg);
  transform: scale(1.1) rotate(0.02deg);
  /*-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .20);*/
}
.smooth-pop:hover::after {
  opacity: 1;
}

<div class="smooth-pop" style="width:50px; height:50px; border:1px solid black">
  test
</div>

Answer 1

这是由于使用了 CSS 变换属性。 使用它会模糊元素以获得更好的过渡，我建议您转换盒子的宽度和高度，而不是使用 transform 属性。