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中它非常清晰，但不是铬合金。

我 THIS ，在线发布，但仍未找到解决方法。

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

编辑：diabling硬件加速工作正常！但是，我无法告诉我的用户这样做。

谢谢。

Answer 1

“像素的一半”中的问题

尝试更改翻译值+ 1％或-1％

示例：transform：translateY（-51％）;

Answer 2

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

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

这里是JSFiddle。

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

铬的模糊文本

2 个答案:

参考文献：