在 Chrome 中翻译后字体看起来很模糊

Posted 2023-02-22

【中文标题】在 Chrome 中翻译后字体看起来很模糊

【英文标题】：Font looks blurry after translate in Chrome

【发布时间】：2015-11-09 03:45:35

【问题描述】：

EDIT 2016-07-04（因为这个问题越来越流行）：This is a bug in Chrome。开发者是actively working on a fix。

EDIT 2017-05-14这个bug好像已经修复了，修复会在Chrome 60中介绍

EDIT 2018-05-04 已合并修复，但 the bug still appears to be present。

所以我有一个非常难看的窗口，它通过这个 CSS 在屏幕上居中：

.popup

   position: fixed;
   top: 0;
   bottom: 0;

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

但是，在 Chrome 上看起来像这样（字体看起来很模糊）：

但是在 Firefox 上是这样的：

当我删除 transform 规则时，文本看起来又漂亮又清晰，但它不再正确居中。

当我转到chrome://flags 并执行#disable-direct-write 时，它看起来更好，但用户显然不会这样做，它并不能解决问题。

如何在窗口居中的同时让我的字体看起来不错？

我的 chrome 版本是44.0.2403.155

我有一个使用 WebGL 的 three.js 演示，它在背景画布上呈现。当我禁用演示时，问题不再出现。

JSFiddle with the background.

JSFiddle without the background.

【问题讨论】：

亚像素渲染.....你能定义.popup的宽度吗？

@DanielA.White 我没有为.popup 定义宽度。

你可以吗？如果你这样做，那么你可以以不同的方式居中。

@DanielA.White 我可能会这样做，但我不想这样做。您的意思是将宽度设置为x 像素，然后执行margin-left 的-x 像素？

@joppiesaus 您是否尝试添加transform: translateZ(0)（在您的情况下是transform: translate3d(-50%, -50%, 0)？

【参考方案1】：

我发现-webkit-filter: blur(0) 可以修复你在 Windows 上的 Chrome 中的模糊字体：

JSFiddle

#projectPopup 
    ...
    -webkit-filter: blur(0);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

【讨论】：

@joppiesaus 哦，这很奇怪（。在 Windows 7/8.1/10、OS X、Ubuntu 14.04 上的 Chrome 44 中没问题，类似于this。你使用哪个操作系统？是@ 987654323@也崩溃了？

可能是因为我现在使用的是 Chrome 45。我会在 Linux 上用最新的稳定版本（44）测试它，我相信它会没事的。

【参考方案2】：

在动画之后使用变换的标准化：

Transform X/Y normalization

或者我们使用 zoom double 来缩放纹理，然后再次缩小。在某些情况下，由于其他复杂的转换或翻译，这无法应用，并且并不完美。

...
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);

【讨论】：

缩放：1.05；帮帮我

scale 和 translate 并没有真正混合。这最终使我的文字向下移动了太多。

【参考方案3】：

一半像素的问题。

试试：transform: translate(-50%, -51%);

它会起作用的！

【讨论】：

不，它不起作用。在特定情况和特定解决方案下它可能看起来更好，但这不是问题的解决方案。

举个例子，当它不工作时。这个问题只存在于 Chrome 中。我看到了很多解决方案，例如 translateZ(0) 或 perspective:1000px 或 z-index:1。将您的布​​局移动到另一层的想法。但是在很多情况下，当您使用scale(1.1) 或translateX(-50%) 时会出现问题：0.5px 并且浏览器会使文本变得模糊。在许多情况下，您可以更改当前标签的高度（添加 1px）。

【参考方案4】：

我尝试了所有解决方案，只有这个对我有用（chrome 53）

dialog 
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);

【参考方案5】：

来自相关讨论的建议为我解决了这个问题：https://***.com/a/46117022/7375996

在我的情况下，使用带有一些偏移量的 calc 解决了这个问题：

transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));

【参考方案6】：

元素的高度必须是偶数https://prnt.sc/mtxxa2

【参考方案7】：

2019-04-15，在 Chrome 中仍然发生在我身上。发现把position: fixed改成absolute修复了：

.popup

   position: absolute;  <-- just like that
   top: 50%;
   left: 50%;

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

使用绝对值可能适合也可能不适合您的特定情况，仅我的 2 美分。

【参考方案8】：

我尝试了不同的解决方案，有时甚至是可怕的组合：

translate3d 而不是 translateY zoom:2; transform: scale(0.5); 或 zoom:0.5; transform: scale(2); transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px)); -webkit-filter: blur(0); perspective: 1000px scale(1.0, 1.0) -webkit-font-smoothing: subpixel-antialiased;

他们都没有在 2019 年 7 月工作。

我为模态找到的唯一解决方案应该居中 - 使用 flexbox 对齐而不是变换：翻译。

.modal__container 
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);


  .modal 
    box-sizing: border-box;
    max-width: 80%;
    max-height: 80%;
    padding: 20px;
    overflow-y: auto;
    background: #fff;
  

<div class="modal__container">
  <div class="modal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

【讨论】：

flexbox 它是一个模态/弹出窗口的理想选择，当您需要多个不同位置时您会遇到麻烦

是的，每个模态都需要它自己的容器，以应对不同位置的多个模态。

【参考方案9】：

首先将overflow: hiddden 添加到modal 的父元素中，如果这还不够，请将其添加到modal 的样式中：display: contents 快乐的编码，来自毛里塔尼亚的爱

【参考方案10】：

唯一对我有用的解决方案：

由于结果未四舍五入到最近的像素，翻译可能会导致模糊，因此将 div 高度四舍五入到偶数可以解决此问题。

我们不能在 CSS 中做它，因为它还不知道它的最终高度，所以我们必须在渲染后做。使用 Jquery 轻而易举：

$(window).on("load", function() 
    if($('.popup').height()%2==1) $('.popup').height( 2*Math.round($('.popup').height()/2 ) ) ;
    if($('.popup').width()%2==1) $('.popup').width( 2*Math.round($('.popup').width()/2 ) ) ;
);

致谢：https://***.com/a/57382347/1136132