随机1px背景图片未在Chrome中显示

Question

I have a navbar with links using a 1px wide, no-repeat, right-aligned background image as a divider, but for some reason the background image doesn't appear for one of the links in Chrome - in this case between "Athletics" and "Bowling".

It works in Firefox and Explorer, when zooming in and out in Chrome, when changing the font-size, when reducing the character length of the link, etc. so I believe it has something to do with how Chrome renders the background image.

I have tried different suggestions such as setting the background-size to contain/cover/100% and image-rendering to pixelated (supposedly this only targets regular images and not background images), but I can't get it to work.

How can I ensure that all background images are displayed correctly in Chrome?

CSS

ul {
    display:flex;
    list-style:none;
}

ul a {
    background:url(sports-div.png) right bottom no-repeat;
    display:inline-block;
    font-family:sans-serif;
    font-size:13px;
    padding:5px;
}

HTML

<ul>
<li><a href="#">Football</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Ice hockey</a></li>
<li><a href="#">Volleyball</a></li>
<li><a href="#">Badminton</a></li>
<li><a href="#">Snooker</a></li>
<li><a href="#">Athletics</a></li>
<li><a href="#">Bowling</a></li>
<li><a href="#">Cycling</a></li>
</ul>

http://jsfiddle.net/zc29b8no/1/

Answer 1

The technical explanation is rather long and boring.

But, the gist of it is: it has to do with subpixel rendering .

Your anchors' dimensions are not clear cut pixels and the browser needs to approximate what to render in each pixel. Your 1px image falls on the wrong side of rounding . To make sure it renders inside the element's painted background, you need to replace the right alignment in background-position (which translates to 100% ) with calc(100% - 1px) :

 ul { display:flex; list-style:none; } ul a { background:url(https://i.imgur.com/mCra304.png) calc(100% - 1px) bottom no-repeat; display:inline-block; font-family:sans-serif; font-size:13px; padding:5px; } 

 <ul> <li><a href="#">Football</a></li> <li><a href="#">Basketball</a></li> <li><a href="#">Tennis</a></li> <li><a href="#">Ice hockey</a></li> <li><a href="#">Volleyball</a></li> <li><a href="#">Badminton</a></li> <li><a href="#">Snooker</a></li> <li><a href="#">Athletics</a></li> <li><a href="#">Bowling</a></li> <li><a href="#">Cycling</a></li> </ul> 

Another solution would be to make the image 2px wide, but it might still have variable width.