css background-image w/ background-color shows artifact border in chrome

Question

I am trying to use a transparent .png as a background-image so that I can dynamically use any color I need to, to change the color of the "icon".

I have a .png that is 40px x 40px. I apply it to a div using background-image, then I give that same div a background-color:

.icon {
    width:40px;
    height:40px;
    background-image:url('../images/ico.png');
    background-color:#999999;
}

This normally works fine, so I'm not sure what's going on with this. Here's a screen shot of what I see in Mac and on PC (respectively) in latest version of Chrome:

Mac

PC

EDIT: Here's a stripped down version of the site, which shows the problem I'm having:

I tried making a fiddle (here it is anyway), but the fiddle shows perfectly in chrome, just not on my actual site. I'm not using percentages for this or anything and I'm using the native size for the background - does anyone else have this problem?

Answer 1

Add -webkit-backface-visibility: hidden; to the div with your image background (.info .img in your case).

You are using transform on a parent element, and Chrome does strange things with backface and transformed elements.

I'll link a somewhat relevant answer, though it was an answer to a slightly different problem: css transform, jagged edges in chrome

Answer 2

The transform you have on .info is what is messing with it. Instead of using percentages, try:

    .info{
        transform: translate(0px,-3px);