使用转换和缩放Chrome和FireFox时,文字会模糊

Question

当我同时使用transition和transform,那么动画是不是都非常流畅chrome和firefox.当你将鼠标悬停在它上面时它会模糊.唯一正常的浏览器是IE.

Chome/FireFox(注意文本,当动画开始时它开始变得模糊.当它完成时它会弹回到平滑的字母.)

期望的结果(这在IE中工作)

如何让这些动画也光滑chrome和firefox？

片段:

转换完成后,元素必须再次聚焦.那是什么样子,现在的chrome和firefox.

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
}

button:hover {
  transform: scale(1.1);
  transition: all .33s ease-in-out;
}

<button>Hover me</button>

Answer 1

您可以使用字体相对单位(em)完成非常相似的效果,并在悬停时增加元素字体大小.

button {
  font-size: .875em; /* =14/16 or whatever your base font size is */
  padding: .625em; /* =10/16 */
  border-radius: .1875em; /* =3/16 */
}

button:hover {
  font-size: 1em; /* close enough to 1.1x */
}

请注意,这通常被认为是不太比使用变换高性能,至少是尝试,以便有它周围较少重新流向元素位置.

Windows 10上的Chrome 64:

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: .875em; /* =14/16 or whatever your base font size is */
  color: #fff;
  padding: .625em; /* =10/16 */
  border-radius: .1875em; /* =3/16 */
  transition: all .33s ease-in-out;
  transform: translateX(-50%) translateY(-50%);
}

button:hover {
  font-size: 1em; /* close enough to 1.1x */
  transition: all .33s ease-in-out;
}

<span style="position: relative; left: 2.5em; top: 1em;">
  <button>Hover me</button>
</span>