Help me find 2px of woe!

[Joe]

Launched a new version of my site a few days ago, but somehow the logo is 2px out (you can see some orange underneath).

This only happens in Chrome (not even Safari!) and even by using the inspector I can’t find whats doing it.

Can anyone spot it? It’s really bugging me!

http://bit.ly/1ik0psh

[Paulie_D]

That’s seems to be an odd way to go about it.

You have an inline image AND a different bg image on the div.

Why not put the bg image on the link and swap it on hover?

[Paulie_D]

I suspect part of the problem (other than the above) is that the images are 153px wide.

When you center one of them in the div (which is 240px wide) you get sub-pixel rendering issues as it can’t be 1/2 a px wide on each side.

[Joe]

Hi Paulie,

Thanks for two great answers – may try #1 if I can’t get it working this way.

#2 – I did think about that but applying a 2px margin-left to the image sorts the problem.

[Joe]

Strangely, the bug does not happen on this page: http://bit.ly/1fdO9ZK :S

[Paulie_D]

It does on Chrome.

[Paulie_D]

Why not try.

.header-logo {
text-align: center;
background-image: none;
background-position: top center;
background-repeat: no-repeat;
font-size: 0;
}

.header-logo:hover {
background-image: url("/wp-content/themes/oxfordshirewebv2/images/logo-orange.png");
}

That way the orange image isn’t visible until you hover over the logo at which time the black image disappears.

[Joe]

Whilst that does work, it looks a bit bad as it shifts by that few px on hover. Really interested as to why or how Chrome is adding these extra pixels.

[Paulie_D]

As I said, it’s probably a sub-pixel thing with some ‘bleed’.

Since Chrome can’t render 1/2 a pixel my guess is that it’s rendering an extra full pixel on all sides.

Anyway, seems to me the real problem is the inline image, Is that a WP requirement?

Because if not, you could remove it and

.header-logo {
text-align: center;
background-image: background-image: url("http://cdn.css-tricks.com/wp-content/themes/oxfordshirewebv2/images/logo-charcoal.png");
background-position: top center;
background-repeat: no-repeat;
font-size: 0;
}

.header-logo:hover {
background-image: url("http://cdn.css-tricks.com/wp-content/themes/oxfordshirewebv2/images/logo-orange.png");
}

Although you would have to set width/height on the logo element.

[Joe]

It’s a responsive design so it would suck to have to do that for each breakpoint. Think attaching the image as a bg image to the anchor is probably the best solution. Very strange that it’s a Chrome only bug.

[Author]

Posts