铬中的模糊文本

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 中则不然。

我这个，在线问题，但仍然没有找到解决办法。

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

编辑：禁用硬件加速工作！但是我不能告诉我的用户这样做。

谢谢你。

Answer 1

我无法在我的机器上的 chrome 上重现此问题。我过去曾在 webkit 浏览器上多次成功使用以下修复（黑客）：

-webkit-transform: translateZ(0);
transform: translateZ(0);

这是JSFiddle。

我已对您的代码进行了一些更改，但由于我无法在我的计算机上重现该问题，因此无法验证它是否已修复。

参考：

• Chrome 字体显得模糊
• WebKit：带有 css 缩放 + translate3d 的模糊文本