使用变换比例仅在Windows Chrome上导致模糊文本

时间:2017-04-17 16:55:57

标签: css transform scale

我遇到了一个关于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上的一个问题。在Chrome for OSX,FireFox甚至IE上都不会出现此问题。我愿意使用与transform不同的解决方案,前提是动画有一个过渡,就像在我的例子中一样。但是,我希望它只是一个CSS解决方案。

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

我现在无法自己测试,因为我没有方便的Windows电脑,但也许你可以做任何一种解决方案:

  1. backface-visibility: hidden;添加到.zoom
  2. transform属性.zoom:hover更改为transform: scale(1.05) translateZ(0);
  3. 应该触发GPU材料加速,只需可以解决您在Chrome上的问题。但是没有承诺。祝你好运!