Blurry text in chrome

Question

I have just created a simple image overlay effect , see below, FIDDLE HERE.

HTML below

<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>

Now when i view this in chrome , the text on top of the image and the overlay is quite blurred , In FF its quite clear , but not in chrome.

I THIS , issue online , but have still not found a fix.

Is this a known issue and how does one go ahead and fix this ?

EDIT: diabling hardware acceleration works ! BUT then i can't tell my users to do that.

Thank you.

Answer 1

Problem in "half of pixel"

Try to change translate value +1% or -1%

Example: transform: translateY(-51%);