CSS3 动画导致文本渲染不佳

Question

我正在尝试在背景图像上使用 CSS3 动画。一切正常，问题是在 Chrome 上，当动画正在进行时，文本最终会变得模糊：

动画期间：

关闭动画：

正如您所看到的，当动画关闭时文本渲染很好，我知道文本渲染通常存在问题，但我不明白为什么在动画进行时 Chrome 上的渲染很差。我不确定我真的能做些什么。我已经在 Firefox 和 IE 上测试过动画，没关系。顺便说一句，我在 Windows 上工作。

火狐：

IE：

编辑

.bg-div {
    position: fixed;
    width: 110%;
    height: 110%;
    transform: translate(-5%, -5%);
    -moz-transform: translate(-5%, -5%) rotate(0.02deg); /* rotation to solve choppy animation on Firefox */
    -ms-transform: translate(-5%, -5%);
    background-image: url('images/colour-test.jpg');
    background-size: cover;
    -webkit-animation: bg-animation 10s linear infinite;
    -moz-animation: bg-animation 10s linear infinite;
    -ms-animation: bg-animation 10s linear infinite;
}

@-webkit-keyframes bg-animation {
    25% { transform: translate(-5.5%, -5.5%); }
    50% { transform: translate(-5.3%, -4.9%); }
    75% { transform: translate(-4.8%, -4.3%); }
}
@-moz-keyframes bg-animation {
    25% { -moz-transform: translate(-5.5%, -5.5%) rotate(0.02deg); }
    50% { -moz-transform: translate(-5.3%, -4.9%) rotate(0.02deg); }
    75% { -moz-transform: translate(-4.8%, -4.3%) rotate(0.02deg); }
}
@-ms-keyframes bg-animation {
    25% { -ms-transform: translate(-5.5%, -5.5%); }
    50% { -ms-transform: translate(-5.3%, -4.9%); }
    75% { -ms-transform: translate(-4.8%, -4.3%); }
}
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 65%;
    text-align: center;
}

阅读 cmets 中发布的问题和答案后，我尝试将 -webkit-font-smoothing: subpixel-antialiased; 添加到 .bg-div，但这并没有任何区别。

编辑 2

好吧，这有点奇怪，在动画过程中，position: fixed 显然使文本变得模糊。我不知道这是怎么可能的，无论如何，一旦我删除了position: fixed 并且背景是动画，文本就会正确显示。这仍然不是我想要的，因为我需要修复背景。

Answer 1

在我的测试中，如果transform 未在.content 上使用，则问题已得到解决。幸运的是，您不需要使用转换来定位您的内容 div。

使用这个边距：自动定位来代替

• 使用此方法，无需使用transform: translate(-50%, -50%)

• 内容居中，由上、右、下、左、margin: auto和百分比宽高组合而成。

.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 65%;
  text-align: center;
}

工作示例

body { margin: 0 auto; width: 500px }

.bg-div {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 800px;
  height: 800px;
  transform: translate(-5%, -5%);
  background: url('http://www.placehold.it/800') no-repeat;
  -webkit-animation: bg-animation 2s linear infinite;
  animation: bg-animation 2s linear infinite;
}
@-webkit-keyframes bg-animation {
  0% {
    transform: translate(-5.5%, -5.5%);
  }
  50% {
    transform: translate(-5%, -5%);
  }
  100% {
    transform: translate(-5.5%, -5.5%);
  }
}
@keyframes bg-animation {
  0% {
    transform: translate(-5.5%, -5.5%);
  }
  50% {
    transform: translate(-5%, -5%);
  }
  100% {
    transform: translate(-5.5%, -5.5%);
  }
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 65%;
  text-align: center;
}

<div class="bg-div"></div>

<div class="content">
  <h1>This looks better</h1>
  <input value="Text" />
</div>