使用CSS转换后的文本模糊：scale（）; 在Chrome中

似乎最近有一个Google Chrome浏览器更新，导致在执行之后文字模糊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);
  }
}

如果您在Chrome中访问http://rourkery.com，则应该在主要文本区域中看到问题。它以前没有这样做，并且似乎也没有影响其他Webkit浏览器（例如Safari）。还有其他一些关于人们在使用3d变换时遇到类似问题的帖子，但找不到关于2d变换的任何信息。

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

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

隐藏的背面可见性解决了该问题，因为它将动画简化为仅位于对象的正面，而默认状态为正面和背面。

backface-visibility: hidden;

TranslateZ也可以工作，因为它可以为动画添加硬件加速。

transform: translateZ(0);

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

-webkit-font-smoothing: subpixel-antialiased;

以他们的动画来反对。我发现它可以更改网络字体的呈现方式，但也可以尝试使用该方法。

为了改善模糊度，尤其是。在Chrome上，尝试执行以下操作：

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

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

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

我发现调整比例比例会有所帮助。

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

我还使用translateZ(0)了似乎可以调整转换动画中Chrome的最终舍入步骤的功能。这对我的悬停使用是一个优点，因为它可以提高速度并减少视觉噪音。但是，对于onclick函数，我不会使用它，因为转换后的字体似乎不那么酥脆。

在没有运气的情况下尝试了这里的所有其他功能之后，最终为我解决此问题的是删除了该will-change: transform;属性。由于某种原因，它在Chrome（而不是Firefox）中造成了令人难以置信的缩放比例。

代替

transform: scale(1.5);

使用

zoom : 150%;

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

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

filter: blur(.0px)

桑德尔斯引导我找到答案。除了filter: scale不存在，但是filter: blur存在。

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

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

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

我发现，问题以任何方式发生在相对转换上。translationX（50％），scale（1.1）或其他。提供绝对值始终有效（不会产生模糊的文字）。

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

就我而言，transform: translateY(-50%) translateX(-50%)会导致模糊（我想使对话框居中）。

为了获得更多的“绝对”值，我不得不将十进制值设置为transform: translateY(-50.09%) translateX(-50.09%)。

注意

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

我找到了一个更好，更干净的解决方案：

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

要么

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

感谢这篇文章： 防止变换模糊渲染：比例

加perspective(1px)为我工作。

transform: scale(1.005);

至

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

zoom: 101%;无法使用缩放+缩放的组合时，请尝试用于复杂的设计。

在我的情况下，以下代码导致字体模糊：

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

只是添加zoom属性为我修复了它。进行缩放，以下对我有用：

zoom: 97%;   

我刚刚在Chrome上发现模糊转换（translate3d，scaleX）的另一个尝试是将元素设置为“ display：inline-table ;”。在某些情况下（在X轴上）似乎迫使像素舍入。

我读到了Chrome下的亚像素定位是故意的，开发人员不会修复它。

2019更新
Chrome的显示错误仍未修复，尽管顾客没有错，但本网站全文中没有提供任何建议来解决此问题。我可以同意，我徒劳地尝试了其中的每一个：只有1个接近，这就是css规则：filter：blur（0）; 这消除了将容器移动1px的麻烦，但不能解决容器本身及其可能包含的任何内容的模糊显示错误。

这就是现实：实际上没有解决此问题的方法，因此这里是针对易变网站的一种解决方法

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

示例：首先是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>

这是发生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%;}

这是固定的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%;}

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

如您所见，对CSS进行少量调整可以减少或消除使用transform进行定位的要求。这也可能适用于固定宽度的网站以及流畅的网站。

我有着同样的问题。我使用以下方法修复了此问题：

.element {
  display: table
}

以上都不对我有用。我在弹出窗口中有此动画：

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

就我而言，应用此规则后，模糊效果消失了： -webkit-perspective: 1000;即使在Chrome检查器中将其标记为未使用。

我的解决方案是：

显示：初始；

然后酥脆锋利

以上都不对我有用。

当我添加视角时它起作用了

即从

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

我改为

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

我通过添加以下内容解决了问题：

transform: perspective(-1px)

对于草木：

我在这里尝试了所有建议。但是没有用。我的大学找到了一个很好的解决方案，效果更好：

你不应该超过1.0

并且包括translateZ(0)在悬停中，但不包括在非悬停/初始位置。

例：

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

我使用了所有答案的组合，这最终对我有用：

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

使用Chrome时，我在Chrome上遇到文本模糊的问题，而在Firefox上却没有transform: translate(-50%,-50%)。

好吧，我真的尝试了很多解决方法，例如：

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

这些都不对我有用。

最后，我使元素的高度和宽度均匀。它为我解决了这个问题！！！

注意：可能因情况而异。但是肯定值得一试！

不幸的是，Version 81.0.4044.138 我已经从这些答案中尝试了许多示例，但我对Chrome的转换元素没有任何帮助

 transform-origin: 50% 50%;

这个

 transform-origin: 51% 51%;

对我有帮助

对我来说，问题是我的元素正在使用transformStyle: preserve-3d。我意识到，此应用程序实际上并不需要此功能，将其删除即可解决模糊问题。

我从代码中删除了此代码，transform-style: preserve-3d; 并添加了此代码- transform: perspective(1px) translateZ(0);

模糊消失了！

在Chrome 74.0.3729.169（当前版本为5-25-19）中，似乎并没有针对由于转换导致的某些浏览器缩放级别上出现的模糊进行任何修复。即使是简单的操作TransformY(50px)也会使元素模糊。在当前版本的Firefox，Edge或Safari中不会发生这种情况，而且似乎并非在所有缩放级别上都发生。

仅使用CSS很难解决。

所以我用jQuery解决了。

这是我的CSS。

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

这是我的jQuery。

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}

只是为了增加解决问题的热潮，将{border：1px solid＃???}放在外观不好的对象周围就可以解决此问题。如果您有稳定的背景色，也​​要考虑这一点。没人提我想这太蠢了，嗯。

您可以使用CSS filter修复此问题。

.element {
    filter: blur(0);
}

关于供应商前缀，请自己完成。-webkit-filter，-ms-filter。详细信息在这里 http://browser.colla.me/show/css_transformation_scale_cause_blurring

如果你不这样做的文本将不会是模糊transition的transform。

只是这样做：

&:hover {
    transform: scale(1.1);
}

没有像过渡 transition: all .2s;