仅在 Windows Chrome 上使用变换比例会导致文本模糊 [英] Using transform scale causes blurry text only on Windows Chrome

问题描述

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

body, html {font-family:'Open Sans', sans-serif;}.飞涨 {转换:转换 0.5 秒；宽度:300px；边距:50px 自动；}.zoom:悬停{变换:缩放(1.05)translateZ(0)；意志改变:转变；}.zoom h4 {字体大小:2rem;行高:2.5rem；-webkit-font-smoothing:抗锯齿；背面可见性:隐藏；-webkit 过滤器:模糊(0)；过滤器:模糊(0)；保证金:0;文本转换:大写；}.zoom p {-webkit-font-smoothing:抗锯齿；背面可见性:隐藏；-webkit-filter:blur(0);过滤器:模糊(0)；保证金:0;}

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

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

有什么想法吗?

解决方案

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

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

这应该触发 GPU 材质加速并且可能解决您在 Chrome 上的问题.不过没有承诺.祝你好运！

I have run into a pretty frustrating problem regarding the CSS transform scale. I have a block of text which I would like to zoom by 105% on hover and it is causing blurriness of the text, but only on the Windows version of Chrome. I found this question and tried the various solutions provided there, but I still cannot get it to work as desired.

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>

As I mentioned earlier, this only seems to be an issue on the Windows version of Chrome. On Chrome for OSX, FireFox and even IE this issue does not occur. I am open to using a different solution than transform, provided the animation has a transition as it does in my example. I would, however, like for it to be a CSS only solution.

Any ideas?

解决方案

I can't test it myself right now as I don't have a Windows computer handy, but maybe you can do either solutions:

1. Adding backface-visibility: hidden; to .zoom
2. Changing your transform on .zoom:hover property to transform: scale(1.05) translateZ(0);

This should trigger GPU material acceleration and just might solve your issue on Chrome. No promises, though. Good luck!

这篇关于仅在 Windows Chrome 上使用变换比例会导致文本模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！