html - Blurry text in chrome -

i have created 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 view in chrome , text on top of image , overlay quite blurred , in ff quite clear , not in chrome.

i this , issue online , have still not found fix.

is known issue , how 1 go ahead , fix ?

edit: diabling hardware acceleration works ! can't tell users that.

thank you.

problem in "half of pixel"

try change translate value +1% or -1%

example: transform: translatey(-51%);