CODEWITHSUNDEEP
htmlcss
Alexander Solonik
Alexander Solonik

Reputation: 10250

Blurry text in chrome

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.

Upvotes: 5

Views: 9008

Answers (2)

egor.xyz
egor.xyz

Reputation: 3197

Problem in "half of pixel"

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

Example: transform: translateY(-51%);

Upvotes: 3

pygeek
pygeek

Reputation: 7414

I am unable to reproduce this issue on chrome on my machine. I've used the following fix (hack) several times in the past on webkit browsers with success.:

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

Here's the JSFiddle.

I've applied some changes to your code, but unable to verify that it was fixed due to the fact that I'm unable to reproduce the issue on my machine.

References:

Upvotes: 0

Related Questions