Question

在以下示例中，包含一些文本的DIV（示例A）在应用transform: translate CSS时会稍微模糊。

而在文本示例B中，字体很清晰。

此问题仅在Google Chrome上发生，在FireFox 46.0.1上运行正常。我能够重现它：

Google Chrome版本51.0.2704.84 m
Google Chrome版本53.0.2768.0 canary（64位）

我想知道，如果我的代码出现问题，或者是Chrome中的错误。

同样任何想法如何解决它是值得欢迎的，考虑到我希望尽可能保留transform: translate，我主要针对最新的Chrome和FireFox。

到目前为止我注意到的事项：

在不同的字体大小下，不同级别会出现模糊效果。
使用webkit-font-smoothing : none;无济于事。
任何字体（系统默认或自定义）都会出现问题。
我使用的是Window 8.1。

这是live example：

#test {
  position: fixed;
  font-size: 20px;
  top: 60%;
  left: 40%;
}

#splashScreen__spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -90px);
  width: 50px;
  height: 50px;
}

#splashScreen__infos {
  position: fixed;
  font-size: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-font-smoothing: none;
}

.loadingSpinner {
  width: inherit;
  height: inherit;
  border: 5px solid #3498db;
  border-top-color: rgba(0, 0, 0, 0);
  border-left-color: rgba(0, 0, 0, 0);
  border-radius: 50%;
  animation: spinnerAnimation 0.7s infinite linear;
}

@keyframes spinnerAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<body>
  <div data-ntv-type="Spinner" class="spinner" id="splashScreen__spinner" widgetid="splashScreen__spinner">
    <div id="splashScreen__spinner__spinner" class="loadingSpinner"></div>
  </div>
  <div id="splashScreen__infos">A) - We are loading your website. Please wait.</div>
  <div id="test">B) - We are loading your website. Please wait.</div>
</body>

Answer 1

这不是代码中的错误，这是众所周知的Webkit呈现错误。例如，请参阅：https://support.mozilla.org/pl/questions/1075185（以及FF支持论坛上的更多主题）。

在Chrome和FF中，在高级浏览器设置中，您可以关闭所谓的“硬件加速”。此设置用于让您的硬件在进行高级图形渲染时“帮助”浏览器。对于使用translate和其他一些规则的元素，硬件加速会自动打开。实际上，有些人会在没有经验的“css黑客”中使用它来在某些情况下实现更好/更清晰的渲染。

但有时它会导致更糟糕而不是好事，这就是你的情况。在浏览器中关闭硬件加速后，字体非常清晰。可悲的是，代码没有真正的解决方案，你不能强迫它为给定的元素关闭。我们依赖于Webkit devs来修复渲染引擎。你只能乱砍，例如将字体大小更改为一个没有真正原因渲染效果更好的字体。或者以某种方式改变定位，而不涉及translate。祝你好运。

变换时文本模糊：translate并且它与另一个带有动画

1 个答案: