css - 使用变换比例只会在 Windows Chrome 上导致文本模糊

Question

关于 CSS 转换 scale，我遇到了一个非常令人沮丧的问题。我有一段文本，我想在悬停时将其放大 105%，这会导致文本模糊，但仅限于 Windows 版本的 Chrome。我找到了 this question并尝试了那里提供的各种解决方案，但我仍然无法让它按预期工作。

body, html {
  font-family:'Open Sans', sans-serif;
}
.zoom {
  transition:transform .5s;
  width:300px;
  margin:50px auto;
}
  .zoom:hover {
    transform: scale(1.05) translateZ(0);
    will-change:transform;
  }
  .zoom h4 {
    font-size:2rem;
    line-height:2.5rem;
    -webkit-font-smoothing:antialiased;
    backface-visibility: hidden;
    -webkit-filter: blur(0);
    filter: blur(0);
    margin:0;
    text-transform:uppercase;
  }
  .zoom p {
    -webkit-font-smoothing:antialiased;
    backface-visibility:hidden;
    -webkit-filter:blur(0);
    filter:blur(0);
    margin:0;
  }

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="zoom">                  
  <h4>Lorem Ipsum</h4>
  <p>Lorem ipsum dolor sit amet, conse ctetur adipiscing elit…</p>
</div>

正如我之前提到的，这似乎只是 Windows 版本的 Chrome 上的一个问题。在适用于 OSX、FireFox 甚至 IE 的 Chrome 上，不会出现此问题。我愿意使用与 transform 不同的解决方案，前提是动画有一个过渡，就像我的示例中那样。但是，我希望它成为一个纯 CSS 解决方案。

有什么想法吗？

Answer 1

我现在无法自己测试，因为我手边没有 Windows 计算机，但也许您可以执行以下任一解决方案:

1. 将 backface-visibility: hidden; 添加到 .zoom
2. 将 .zoom:hover 属性上的 transform 更改为 transform: scale(1.05) translateZ(0);

这应该触发 GPU Material 加速并且可能解决您在 Chrome 上的问题。不过，没有 promise 。祝你好运!