html - chrome 中的模糊文本

Question

我刚刚创建了一个简单的图像叠加效果，见下文， FIDDLE HERE .

下面的 HTML

<figure>
  <img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt="">
  <figcaption>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p>
  </figcaption>
</figure>

现在，当我在 chrome 中查看时，图像顶部的文本和叠加层非常模糊，在 FF 中非常清晰，但在 chrome 中则不然。

我 THIS ，在线发布，但仍未找到修复。

这是一个已知问题吗？如何继续解决这个问题？

编辑:禁用硬件加速有效!但是我不能告诉我的用户这样做。

谢谢。

Answer 1

“半像素”的问题

尝试改变翻译值 +1% 或 -1%

例子:变换:translateY(-51%);