使用 CSS 变换后的模糊文本： scale(); 在 Chrome 中

Blurry text after using CSS transform: scale(); in Chrome

提问by Ryan O'Rourke

Seems like there has been a recent update to Google Chrome that causes blurry text after doing a transform: scale(). Specifically I'm doing this:

似乎谷歌浏览器最近有一个更新，在执行transform: scale(). 具体来说，我是这样做的：

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

If you visit http://rourkery.comin Chrome, you should see the problem on the main text area. It didn't used to do this and it doesn't seem to effect other webkit browsers (like Safari). There were some other posts about people experiencing a similar issue with 3d transforms, but can't find anything about 2d transforms like this.

如果您在 Chrome 中访问http://rourkery.com，您应该会在主要文本区域看到问题。它过去不这样做，它似乎不会影响其他 webkit 浏览器（如 Safari）。还有其他一些关于人们在 3d 转换方面遇到类似问题的帖子，但找不到关于 2d 转换的任何信息。

Any ideas would be appreciated, thanks!

任何想法将不胜感激，谢谢！

回答by 2ne

I have have this problem a number of times and there seems to be 2 ways of fixing it (shown below). You can use either of these properties to fix the rendering, or both at the same time.

我多次遇到这个问题，似乎有两种解决方法（如下所示）。您可以使用这些属性中的任何一个来修复渲染，或者同时使用这两个属性。

Backface visibility hidden fixes the problem as it simplifies the animation to just the front of the object, whereas the default state is the front and the back.

隐藏背面可见性解决了这个问题，因为它简化了对象正面的动画，而默认状态是正面和背面。

backface-visibility: hidden;

TranslateZ also works as it is a hack to add hardware acceleration to the animation.

TranslateZ 也可以工作，因为它是一种向动画添加硬件加速的技巧。

transform: translateZ(0);

Both of these properties fix the problem that you are having but some people also like to add

这两个属性都解决了您遇到的问题，但有些人也喜欢添加

-webkit-font-smoothing: subpixel-antialiased;

to their animated to object. I find that it can change the rendering of a web font but feel free to experiment with that method too.

以他们的动画来反对。我发现它可以改变网页字体的渲染，但也可以随意尝试这种方法。

回答by ykadaru

To improve the blurriness, esp. on Chrome, try doing this:

为了改善模糊性，尤其是。在 Chrome 上，尝试这样做：

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

UPDATE:Perspectiveadds distance between the user and the z-plane, which technically scales the object, making the blurriness seem 'permanent'. The perspective(1px)above is like duck-tapebecause we're matching the blurriness we're trying to solve. You might have better luck with the css below:

更新：透视增加了用户和 z 平面之间的距离，这在技术上缩放了对象，使模糊看起来“永久”。在perspective(1px)上面就像是鸭子磁带，因为我们匹配我们正在试图解决的模糊。使用下面的 css 可能会更好：

transform: translateZ(0);
backface-visibility: hidden;

回答by Jordan Nakamoto

I found that adjusting the scale ratio helped slightly.

我发现调整比例比例略有帮助。

Using scale(1.048)over (1.05)seemed to generate a better approximation to a whole-pixel font size, reducing the sub-pixel blurring.

使用scale(1.048)over(1.05)似乎可以更好地近似整个像素的字体大小，从而减少子像素模糊。

I also used translateZ(0)which seems to adjust Chrome's final rounding step in the transform animation. This is a plus for my onhover usage because it increases speed and reduces visual noise. For an onclick function however, I wouldn't use it because, the transformed font doesn't appear to be as crispy.

我还使用了translateZ(0)which 似乎在转换动画中调整了 Chrome 的最后舍入步骤。这对我的悬停使用来说是一个加分项，因为它提高了速度并减少了视觉噪音。但是，对于 onclick 功能，我不会使用它，因为转换后的字体看起来不那么脆。

回答by Naisheel Verdhan

Instead of

代替

transform: scale(1.5);

using

使用

zoom : 150%;

fixes the text blurring problem in Chrome.

修复了 Chrome 中的文本模糊问题。

回答by Dan

After trying everything else here with no luck, what finally fixed this issue for me was removingthe will-change: transform;property. For some reason it caused horribly blurry looking scaling in Chrome, but not Firefox.

在没有运气的情况下尝试了所有其他方法之后，最终为我解决了这个问题的是删除了该will-change: transform;属性。出于某种原因，它在 Chrome 中导致了非常模糊的缩放，但在 Firefox 中没有。

回答by andyw

This must be a bug with Chrome (Version 56.0.2924.87), but the below fixes the bluriness for me when changing css properties in the console('.0'). I'll report it.

这一定是 Chrome（版本 56.0.2924.87）的一个错误，但在更改控制台（'.0'）中的 css 属性时，以下内容为我修复了模糊。我会报告的。

filter: blur(.0px)

回答by ruidovisual

Sunderls lead me to the answer. Except filter: scaledoes not exist, but filter: blurdoes.

桑德尔斯带领我找到了答案。除了filter: scale不存在，但filter: blur确实存在。

Apply the next declarations to the elements that appear blurred (in my case they were inside a transformed element):

将下一个声明应用于看起来模糊的元素（在我的情况下，它们位于转换后的元素内）：

backface-visibility: hidden;    
-webkit-filter: blur(0);

It almostworked perfectly. "Almost" because i'm using a transition and while in transition, elements don't look perfect, but once the transition is done, they do.

它几乎完美地工作。“几乎”因为我正在使用过渡，并且在过渡时，元素看起来并不完美，但是一旦过渡完成，它们就会完美。

回答by scipper

I found out, that the problem occures on relative transforms in any way. translateX(50%), scale(1.1) or what ever. providing absolute values always works (does not produce blurry text(ures)).

我发现，问题以任何方式发生在相对变换上。translateX(50%), scale(1.1) 或什么。提供绝对值总是有效的（不会产生模糊的文本（ures））。

None of the solutions mentions here worked, and I think there is not solution, yet (using Chrome 62.0.3202.94 while I am writing this).

这里提到的解决方案都没有奏效，我认为还没有解决方案（在我写这篇文章时使用 Chrome 62.0.3202.94）。

In my case transform: translateY(-50%) translateX(-50%)causes the blur (I want to center a dialog).

在我的情况下transform: translateY(-50%) translateX(-50%)会导致模糊（我想将对话框居中）。

To reach a bit more "absolute" values, I had to set decimal values to transform: translateY(-50.09%) translateX(-50.09%).

为了达到更多的“绝对”值，我必须将十进制值设置为transform: translateY(-50.09%) translateX(-50.09%).

NOTE

笔记

I am quite sure, that this values vary on different screen sizes. I just wanted to share my experiences, in case it helps someone.

我很确定，这个值在不同的屏幕尺寸上会有所不同。我只是想分享我的经验，以防它对某人有所帮助。

回答by SUHAIL KC

Adding perspective(1px)worked for me.

添加perspective(1px)对我有用。

transform: scale(1.005);

to

到

transform: scale(1.005) perspective(1px);

回答by SHymans

2019 Update
The Chrome display bug is still unfixed and though no fault of the patrons, none of the suggestions offered in the entirety of this website help to resolve the issue. I can concur that I have tried every single one of them in vain: only 1 comes close and that's the css rule: filter:blur(0); which eliminates the shifting of a container by 1px but does not resolve the blurred display bug of the container itself and any content it may have.

2019 更新
Chrome 显示错误仍未修复，尽管顾客没有过错，但本网站提供的所有建议均无助于解决问题。我可以同意，我已经尝试了其中的每一个都是徒劳的：只有 1 个接近，这就是 css 规则：filter:blur(0); 这消除了容器移动 1px 的问题，但不能解决容器本身及其可能包含的任何内容的模糊显示错误。

Here's the reality: there literally is no fix to this problem so here is a work around for fluid websites

这是现实：这个问题实际上没有解决办法，所以这里有一个针对流畅网站的解决方法

CASE
I'm currently developing a fluid website and have 3 divs, all centered with hover effects and sharing percentage values in both the width and position. The Chrome bug occurs on the center container which is set to left:50%; and transform:translateX(-50%); a common setting.

案例
我目前正在开发一个流畅的网站，有 3 个 div，全部以悬停效果为中心，并在宽度和位置上共享百分比值。Chrome 错误发生在设置为 left:50% 的中心容器上；和转换：translateX(-50%); 一个常见的设置。

EXAMPLE:First the HTML...

示例：首先是 HTML...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Here's the CSS where the Chrome bug occurs...

这是发生 Chrome 错误的 CSS ......

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Here's the fixed css...

这是固定的CSS ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Bugged fiddle:https://jsfiddle.net/m9bgrunx/2/
Fixed fiddle:https://jsfiddle.net/uoc6e2dm/2/

错误的小提琴：https
: //jsfiddle.net/m9bgrunx/2/固定的小提琴：https ://jsfiddle.net/uoc6e2dm/2/

As you can see a small amount of tweaking to the CSS should reduce or eliminate the requirement to use transform for positioning. This could also apply to fixed width websites as well as fluid.

正如您所看到的，对 CSS 进行少量调整应该会减少或消除使用变换进行定位的要求。这也适用于固定宽度的网站以及流体。