5

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.

Alexander Solonik
  • 9,838
  • 18
  • 76
  • 174

2 Answers2

3

Problem in "half of pixel"

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

Example: transform: translateY(-51%);

egor.xyz
  • 2,847
  • 1
  • 21
  • 18
0

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:

Community
  • 1
  • 1
pygeek
  • 7,356
  • 1
  • 20
  • 41
  • if you check my code , i have the following line in it `transform: translate(-50%, -50%);` , so i can't really use your solution. , but yes if i remove `transform: translate(-50%, -50%);` , the blurring is not there any more , but i need that line of code ! – Alexander Solonik Jan 29 '16 at 05:28
  • What purpose is that line of code serving? I didn't notice any difference in my browser. – pygeek Jan 29 '16 at 06:06
  • removing that line of code , will have the content no longer vertically and horizontally centered . (maybe in the fiddle the font is too big , so you cant see the difference !) – Alexander Solonik Jan 29 '16 at 06:12
  • There are a few other ways to vertically and horizontally center text. I've actually never seen it done as you have done it. At this point it's best practice to use flexbox for this sort of thing (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes). Also, take a look at http://pygeek.com — you'll see what I did there to center text before flex box was widely supported. – pygeek Jan 29 '16 at 06:23
  • unfortunatly i can't use flexbox in production ! :( i know how good it is. i'll check out the link u've sent , but i'll probably have to stick to my method of vertically aligning (its quite a widely used approach ! ), the reason being , my current project , extensively uses that method . – Alexander Solonik Jan 29 '16 at 06:39