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 enter image description here

PC enter image description here

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?

If in the fiddle works ... how do you expect us can solve the problem ? Maybe share also the link to your website — DaniP, Dec 12 '14 at 15:56
@danko I've edited the question to show a stripped down version of the page — ntgCleaner, Dec 12 '14 at 16:25

score 5 · Accepted Answer · edited May 23 '17 at 12:34

5

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

edited May 23 '17 at 12:34

Community

1
1

answered Dec 12 '14 at 16:56

JackArbiter

5,705
2
27
34

1

Very nice, I've never seen this before! – ntgCleaner Dec 12 '14 at 17:05

score 1 · Answer 2 · answered Dec 12 '14 at 17:02

1

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

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

answered Dec 12 '14 at 17:02

Justin Breiland

450
2
5

You are very correct in saying the percentages in the transform is what was messing it up. Unfortunately, I have to use percentages for this specific application. – ntgCleaner Dec 12 '14 at 17:06

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

2 Answers2