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

Question

众所周知，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 层调试器中显示为展平整个由于某种原因，在旋转期间将页面翻到单层 - 但这不可能永久应用。

None 这些问题完全影响 Firefox 或 Edge；两者都能顺利地呈现文本。

此时我有点困惑。如果有人对 1) 为什么首先会发生这种情况，或 2) 如何解决它有任何想法，我们将不胜感激。

Answer 1

对于出于某种原因搜索此问题的任何人，事实证明这是一个 Blink 合成错误。正在 actively worked on at the moment.

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

Chrome blurs text at a net rotation of 0, but I can't replicate it out of environment

css

google-chrome

rotation

chromium

blink