Google chrome 使用CSS变换后文本模糊：scale（）；含铬

谷歌Chrome最近的一次更新似乎在执行

transform:scale（）

后导致文本模糊。具体来说，我是这样做的：

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

@-webkit关键帧{
0% {
不透明度：0；
-webkit变换：缩放（.3）；
}
50% {
不透明度：1；
-webkit转换：规模（1.05）；
}
70% {
-webkit变换：缩放（.9）；
}
100% {
-webkit转换：规模（1）；
}
}

如果您在Chrome中访问，您应该会在主文本区域中看到问题。它以前没有这样做，而且似乎也不会影响其他webkit浏览器（如Safari）。还有一些关于人们在3d变换中遇到类似问题的帖子，但是找不到任何关于2d变换的类似内容

---

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

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

Backface visibility hidden修复了该问题，因为它将动画简化为对象的正面，而默认状态为正面和背面

backface-visibility: hidden;

TranslateZ也可以工作，因为它是一种将硬件加速添加到动画中的技术

transform: translateZ(0);

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

-webkit-font-smoothing: subpixel-antialiased;

将其设置为动画对象。我发现它可以改变web字体的呈现方式，但也可以随意尝试这种方法。

而不是

transform: scale(1.5);

使用

zoom : 150%;

---

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

Sunderls引导我找到答案。除了

filter:scale

不存在，但

filter:blur

不存在

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

---

它几乎可以完美地工作。“几乎”是因为我正在使用一个转换，而在转换中，元素看起来并不完美，但一旦转换完成，它们就会完美

尝试使用

缩放：101%

对于无法使用缩放+缩放组合的复杂设计。

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

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

更新：增加用户和z平面之间的距离，从技术上讲，z平面会缩放对象，使模糊看起来“永久”。上面的

透视图（1px）

就像鸭子胶带一样，因为我们正在匹配我们试图解决的模糊度。使用下面的css可能会更幸运：

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

---

在我的例子中，以下代码导致字体模糊：

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

只需添加zoom属性，就可以为我修复它。使用zoom进行游戏，以下内容对我很有用：

zoom: 97%;   

---

我发现调整比例略有帮助

使用

scale（1.048）

over

（1.05）

似乎可以更好地近似整个像素字体大小，减少亚像素模糊

---

我还使用了

translateZ（0）

，它似乎可以调整Chrome在变换动画中的最后一个舍入步骤。这对我的onhover使用是一个加号，因为它提高了速度并减少了视觉噪音。但是，对于onclick函数，我不会使用它，因为转换后的字体看起来不那么清晰。

需要补充的是，如果要转换的元素具有奇数像素的高度，则会出现此问题。因此，如果您可以控制元素的高度，将其设置为偶数将使内容看起来清晰

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

filter: blur(.0px)

---

对我来说，问题是我的元素使用的是

transformStyle:preserve-3d

。我意识到这个应用程序实际上并不需要它，删除它修复了模糊的问题。

以上这些都不适合我。 我为弹出窗口制作了一个动画：

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

在我的例子中，应用此规则后，模糊效果消失：

---

-webkit透视图：1000即使它在Chrome inspector中被标记为未使用。
我找到了一种更好、更干净的解决方案：

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

或

感谢这篇文章：
我发现，问题以任何方式出现在相对变换上。translateX（50%）、scale（1.1）或其他任何形式。提供绝对值始终有效（不会产生模糊文本（ures））

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

在我的例子中，
transform:translateY（-50%）translateX（-50%）
导致模糊（我想将对话框居中）

为了获得更多的“绝对”值，我必须将十进制值设置为
transform:translateY（-50.09%）translateX（-50.09%）

注意

我很确定，这个值在不同的屏幕大小上是不同的。我只是想分享我的经验，以防对别人有所帮助
 以上这些都不适合我

当我添加透视图时，它起作用了

来自

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)

在尝试了这里的其他一切之后，我最终解决了这个问题，那就是删除该
将更改：transform属性。出于某种原因，它在Chrome中造成了可怕的模糊缩放，但在Firefox中却没有。
我从我的代码中删除了这个-
转换样式：preserve-3d
并添加了这个-
transform:perspective（1px）translateZ（0）

模糊消失了
 对于CHORME：

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

不应缩放超过1.0

并将
translateZ（0）
包含在悬停中，但不包含在n中
transform: perspective(-1px)

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;
}

<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>

*{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%;}

*{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%;}

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

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

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

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);
    }
})}

 transform-origin: 50% 50%;

 transform-origin: 51% 51%;

perspective: 2500px;