Question

似乎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变换。

任何想法都会受到赞赏，谢谢！

Answer 1

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

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

backface-visibility: hidden;

TranslateZ也可以用来为动画添加硬件加速。

transform: translateZ(0);

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

-webkit-font-smoothing: subpixel-antialiased;

他们的动画对象。我发现它可以改变网络字体的渲染，但也可以尝试使用该方法。

Answer 2

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

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

更新： Perspective增加了用户与z平面之间的距离，从而在技术上扩展了对象，使得模糊看起来是永久性的＃39;上面的perspective(1px)就像 duck-tape ，因为我们正在尝试解决我们正在尝试解决的模糊问题。你可能会对下面的CSS有更好的运气：

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

Answer 3

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

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

我还使用了translateZ(0)，它似乎调整了Chrome在变换动画中的最终舍入步骤。这对我的onhover用法来说是一个加分，因为它可以提高速度并降低视觉噪音。但是对于onclick函数，我不会使用它，因为转换后的字体看起来不那么脆。

Answer 4

而不是

transform: scale(1.5);

使用

zoom : 150%;

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

Answer 5

Sunderls引导我回答。 filter: scale除外，filter: blur不存在。

将下一个声明应用于模糊的元素（在我的情况下，它们位于变换后的元素中）：

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

几乎完美无缺。＆＃34; 概＆＃34;因为我正在使用转换，而在转换过程中，元素看起来并不完美，但是一旦转换完成，它们就会完成。

Answer 6

这一定是Chrome（版本56.0.2924.87）的错误，但下面修复了在控制台中更改css属性时的模糊性（＆＃39; .0＆＃39;）。我会举报。

filter: blur(.0px)

Answer 7

我发现，问题以任何方式发生在相对变换上。 translateX（50％），规模（1.1）或者什么。提供绝对值始终有效（不会产生模糊文本（ures））。

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

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

达到更多＆＃34;绝对＆＃34;值，我必须将小数值设置为transform: translateY(-50.09%) translateX(-50.09%)。

注意

我很确定，这些值因屏幕尺寸不同而异。我只是想分享我的经验，以防它帮助某人。

Answer 8

如果无法使用缩放+比例组合，请尝试使用zoom: 101%;进行复杂设计。

Answer 9

我有同样的问题。我使用以下方法解决了这个问题：

public PreparedStatement prepareStatement (String sql_code)
    throws SQLException {
    prepstat = connection.prepareStatement(sql_code);
    return prepstat;
}

Answer 10

添加.summernote对我有用。

var tab_pane = document.getElementsByClassName("tab-pane");

for (i = 0; i < tab_pane.length; i++) {
  // Select the node that will be observed for mutations
  var targetNode = tab_pane[i];

  // Options for the observer (which mutations to observe)
  var config = { attributes: true, characterData: true, childList: true, subtree: true, attributeOldValue: true, characterDataOldValue: true };

  // Callback function to execute when mutations are observed
  var callback = function(mutationsList, observer) {
      for(var mutation of mutationsList) {
        if (mutation.type == 'childList')
            detect_editor();
        if (mutation.type == 'subtree')
            detect_editor();
      }
  };

  // Create an observer instance linked to the callback function
  var observer = new MutationObserver(callback);

  // Start observing the target node for configured mutations
  observer.observe(targetNode, config);
}

function detect_editor() {
  var editor = document.getElementsByClassName("summernote");
  for (i = 0; i < editor.length; i++) {
    $(editor).summernote({height: 300});
  }
}

到

perspective(1px)

Answer 11

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

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

只是添加缩放属性为我修复了它。玩变焦，跟着为我工作：

zoom: 97%;

Answer 12

我的解决方法是：

显示：初始；

然后它又脆又脆

Answer 13

在没有运气的情况下尝试了所有其他操作之后，最终为我解决了此问题的是删除 will-change: transform;属性。由于某些原因，它导致了Chrome（而不是Firefox）的缩放比例看起来非常模糊。

Answer 14

不幸的是，我已经从这些答案中尝试了很多例子 Chrome Version 81.0.4044.138 我已经添加了转换元素

 transform-origin: 50% 50%;

这一个

 transform-origin: 51% 51%;

对我有帮助

Answer 15

使用foo时，我在Chrome上遇到文本模糊的问题，而在Firefox上却没有。

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

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

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

这些都不对我有用。

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

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

Answer 16

我尝试在Chrome上进行模糊转换（translate3d，scaleX）的另一个尝试是将元素设置为 “ 显示：内联表;”。在某些情况下（在X轴上）似乎迫使像素舍入。

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

Answer 17

我通过添加：

修复了我的情况

{ 
  "filter" => {
    "type" => 'credit',
    "status" => 'fail',
    "invoice_type" => 'invoce',
  }
}

Answer 18

以上都不适合我。

当我添加透视

时，它有效

即来自

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

我改为

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

Answer 19

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

path

或

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

感谢这篇文章： Preventing blurry rendering with transform: scale

Answer 20

这对我有用：

body { perspective: 1px; }

Answer 21

对于将来阅读的任何人：就我而言，问题是我添加了：

perspective: 2500px;

到父元素。删除此属性解决了问题。

Answer 22

就我而言，错误在于动画设置为动画元素（SVG）的父 div。父 div 有一些疯狂的宽度，比如 466.667px。将其设置为奇数无济于事。但是：使用动画定位 SVG 本身（而不是父容器）。

Answer 23

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

Answer 24

您可以使用css filter来解决此问题。

.element {
    filter: blur(0);
}

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

Answer 25

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

Answer 26

对我来说，问题是我的元素正在使用transformStyle: preserve-3d。我意识到应用程序实际上并不需要它，并且删除它会修复模糊性。

Answer 27

以上都不适合我。我有弹出的动画：

@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检查器中标记为未使用。

Answer 28

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进行定位的要求。这也可能适用于固定宽度的网站以及流畅的网站。

Answer 29

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

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

Answer 30

在截至74年5月25日的当前版本的Chrome 74.0.3729.169中，似乎没有解决因变换导致的某些浏览器缩放级别出现模糊的任何方法。即使是简单的TransformY(50px)也会使元素模糊。在当前版本的Firefox，Edge或Safari中不会发生这种情况，而且似乎并非在所有缩放级别都发生。

Answer 31

对于CHORME：

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

您不应超过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);
}

Answer 32

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

模糊消失了！

Answer 33

所以。我尝试了上述所有解决方案，但没有任何效果。但是！

我的 React 应用程序的 index.html 中有一个 modal-root div。如果有必要，我会在其中渲染一个模态组件 (.modal)。首先，我将模态本身固定，使其位于左上角 50% 并应用过渡 (-50%, -50%) 使其居中。

如果 Chrome 浏览器的缩放比例不是 100%，我放大和缩小并注意到模态内容的模糊。它可能是 110% 或 90-80-75 等百分比，没关系。除了 100% 缩放之外，它真的很模糊和丑陋。

因此，我决定摆脱之前将 .modal 元素的子元素居中的整个基于过渡的解决方案。

我正在定位我的模态根固定，使其上左下右下 0，所以它总是 100vh 和 wv。然后我把它做成了一个 flex-container 并通过 align-items 和 justify-content 居中来定位它的孩子。

但是！总有一个但是。 modal-root 有一个 z-index: -1 默认。如果模态打开，我决定以编程方式将其更改为 59。我还应用了一个叠加层，使页面的其余部分变暗，即 .overlay，其 z-index 为 60。实际模态内容 (.modal) 的 z-index 为 61。

我还想在该元素出现时为其设置动画效果，因此我正在调整边距，而不是对其应用任何类型的过渡。这是一个立方体动画，它在动画中以合适的百分比处理 margin-top，但最后它是 margin-top 0，没有过渡属性。

不得不返工组件有点遗憾，但经过测试它工作得很好。

总结：

最高父容器固定，覆盖整个页面
设置最高父容器的 z-index -1 或 [custom-value] 取决于想要与模态交互（模态是打开的）
如果模态关闭，则将容器的 z-index 设置为 -1
使容器成为弹性容器并将其子容器置于中心
通过边距值而不是过渡为孩子设置动画

希望对大家有所帮助:)

Answer 34

如果您不transition transform，则文本不会模糊。

只需执行以下操作：

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

没有这样的过渡 transition: all .2s;

Answer 35

重要的是要补充说，如果正在翻译的元素具有奇数个像素的高度，则会出现此问题。因此，如果您可以控制元素的高度，将其设置为偶数将使内容显得清晰

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

35 个答案: