Thin grey border on background images on tablet / chrome

[Ambulon]

I’m testing a responsive menu design for a wedding website. When viewing on both an iPad and an Android tablet, the background images on li’s have a thin grey border around them.

http://candiceplusjason.com/splash-mobilenav320480.html

I have found all kinds of solutions for this problem when it applies to an img in a div,etc – but not much that is really helpful when one is dealing with background images.

I’m sure this must be a fairly common glitch, but I’m having a heck of a time trying to work it out.

[Paulie_D]

We’re talking about this image…right?

[Ambulon]

Oops. Nope, didn’t mean to give that impression. That image is the background image for the “collapsed” vertical menu that appears below max-device-width: 599px. The background images that are the issue are the five unique shapes that appear in the menu for desktop and most tablets:

Here’s one of them:

[Paulie_D]

Right…it wasn’t immediately obvious on my Nexus 9 but on scaling I can see it on occasion.

My initial thought is that it’s due to sub-pixels as the image scales and that there might be a slight difference in the rendering of the image dark color and the background color. background-color: #858484;

[Ambulon]

Interesting thought. As a test, I changed the background color to the same as the page background and the problem remains. Still a thin grey border.

It seems to only be persisting in portrait mode on both the iPad and Asus tablet I am testing on. And when you zoom in slightly, the border disappears.

[Author]

Posts