css triangle in :before is off by 1px on safari (iPad)

Question

I'm sorry if this should be more obvious, but I've spent a lot of time searching and can't seem to fix my problem.

I'm trying to get a specific arrow shape for a navigation list. It works perfectly on my PC on firefox and chrome, but when I take it to safari on my ipad, there's a 1px space between my :before pseudo element and the background for the link. Is there any way to fix this so that they're aligned correctly on both?

<ul id="listnav">
<li><a href="">link 1</a></li>
<li><a href="">link 2</a></li>
<li><a href="">link 3</a></li>
</ul>

css

#listnav {
list-style-type: none;
float: right;
padding: 0;
margin: 0;
} 

#listnav a:link, a:visited {
display: block;
color: #ffffff;
background-color: #111111;
height: 20px;
width: 220px;
text-align: left;
padding: 3px;
margin:0 15px 5px 10px;
text-decoration: none;
position: relative;
border: none;
}

#listnav a:hover, a:active {
background-color: #462530;
color: #e2d276;
}

#listnav a:before {
content: "";  
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right: 8px solid #111111;
position: absolute; left: -8px; top: 0;
border-radius: 1px;
padding: 0;
}

#listnav a:hover:before {
border-right-color: #462530;
}

jsfiddle link

Thanks for your help!