时间戳

首页 > 解决方案 > Chrome 以 0 的净旋转使文本模糊，但我无法将其复制到环境之外

css - Chrome 以 0 的净旋转使文本模糊，但我无法将其复制到环境之外

问题描述

众所周知，Chrome 无法在不模糊的情况下以净旋转显示文本。然而，在净 0 旋转（例如旋转容器元素 +1deg 和文本本身或另一个容器 -1deg）时，情况不应该如此，因为偏移量为 0。事实上，在示例中我已经煮熟了在这里，如果您在 Chrome 中查看它，您应该会看到文本没有模糊：

.container {
  background: linear-gradient(46deg, #fff, #f2f2f2, #e8e8e8);
  background-size: 600% 600%;
  animation: backgroundGradient 30s ease infinite;
  max-width: 85%;
  position: relative;
  margin: 5%;
  padding: 5vw;
  transform: rotate(-.5deg);
  outline: 1px solid transparent;
}

.sheet {
  transform: rotate(0.5deg);
  font-size: 16px;
}

html,
body {
  min-height: 100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(45deg, #e43624, #e74b3b, #ea6052);
  animation: backgroundGradient 30s ease infinite;
  background-size: 600% 600%;
  overflow-x: hidden;
  font-size: 16px;
  font-family: Sarala;
}
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Sarala%7CGochi+Hand" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="sheet">
      <section>
        <p>
          This is a long block of text with the rotation system. Yay. Let's see if this works
        </p>
      </section>
    </div>
  </div>
</body>

</html>

现在你可能会认为有很多风格是无关紧要的，你是对的 - 因为问题是，这种完全相同的情况在我的投资组合网站上不起作用。如果您在 Chrome 中浏览到https://mashedkeyboard.me/，您会发现文本仍然略微模糊，尽管整个设置已在上面的示例中复制。

最初，我认为这一定是一些周围样式的问题，这就是为什么我将所有容器样式都放入这里的示例中。但没有喜悦 - 我仍然无法在其他地方复制这个问题。

我唯一能解决这个问题的方法是激活:hover网站侧面的个人资料图片，它出现在 Chrome 层调试器中，因为某些原因在旋转期间将整个页面展平为单层- 但这不可能永久适用。

这些问题都不会影响 Firefox 或 Edge；两者都可以流畅地渲染文本，没有任何问题。

在这一点上我有点难过。如果有人对 1）为什么首先会发生这种情况，或 2）如何解决它有任何想法，他们将不胜感激。

标签： cssgoogle-chromerotationchromiumblink

解决方案

无论出于何种原因搜索此问题的任何人都会发现这是一个 Blink 合成错误。目前正在积极开展工作。

推荐阅读