title: Blurry text in chrome
body: <p>I have just created a simple image overlay effect , see below, <strong><a href="https://jsfiddle.net/2s1f1s61/" rel="noreferrer">FIDDLE HERE</a></strong>.</p>
  
  <p>HTML below</p>
  
  <pre><code>&lt;figure&gt;
    &lt;img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt=""&gt;
    &lt;figcaption&gt;
      &lt;h3&gt;Lorem ipsum&lt;/h3&gt;
      &lt;p&gt;Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum&lt;/p&gt;
    &lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>I <strong><a href="https://productforums.google.com/forum/#!topic/chrome/YuDpb4k44cI" rel="noreferrer">THIS</a></strong> , issue online , but have still not found a fix. </p>
  
  <p>Is this a known issue and how does one go ahead and fix this ? </p>
  
  <p><strong>EDIT</strong>: diabling hardware acceleration works ! BUT then i can't tell my users to do that. </p>
  
  <p>Thank you.</p>