CSS triangles: Thin border between container and triangle (iPad / Landscape iPhone) - iphone

Question

I'm running into a very specific issue using CSS triangles:
I've created buttons that work perfectly on desktop browsers (ie9+, ff, chrome, safari), and on iPhones in portrait mode... The issue exists on iPads (retina and non-retina), as well as iPhones in landscape. The button renders with a line between the main container and the css triangle(s) that I've got in place.
Here's a screenshot on imgur:
http://imgur.com/d0k6lP2
Here's the code I'm using:
HTML:
<span>BUTTON SHAPE</span>
CSS (there are potentially a few non-relevant styles included because this is pasted from a larger file):
.cta-watch {
display: inline-block;
position: relative;
padding: 0 10px;
background-color: #91a1a8;
border-collapse: collapse;
color: white;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
letter-spacing: 2px;
font-weight: 400;
font-size: 30px;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 40px;
text-decoration: none;
transform: rotate(360deg);
}
.cta-watch.large {
display: inline-block;
position: relative;
width: 34px;
height: 32px;
}
.cta-watch.large:hover {
text-decoration: none;
}
.cta-watch.large.arrow-left::after, .cta-watch.large.arrow-right::after {
border-left: none;
border-right: none;
}
.cta-watch.large span {
display: inline-block;
width: 0;
height: 0;
text-indent: -99999px;
}
.cta-watch.large span:before {
width: 0;
height: 0;
content: '';
border-color: transparent transparent #91a1a8 transparent;
border-width: 0 27px 14px 27px;
border-style: solid;
position: absolute;
top: -14px;
left: 0;
}
.cta-watch.large span:after {
width: 0;
height: 0;
content: '';
border-color: #91a1a8 transparent transparent transparent;
border-width: 14px 27px 0 27px;
border-style: solid;
position: absolute;
bottom: -14px;
left: 0;
}
.cta-watch.large:before {
display: block;
width: 100%;
height: 0;
content: '\25BA';
color: white;
font-family: arial, "Helvetica Neue", Helvetica, sans-serif;
margin-left: 3px;
font-size: 22px;
line-height: 34px;
text-align: center;
}
JSBin showing code demo here: http://jsbin.com/ocaGeja/1
Any help would be greatly appreciated - Thank you!

Answer 1

I can reproduce the same issue in Chrome for Windows, changing the zoom level.
At least in this situation, it is solved changing this value to decimal:
.cta-watch.large span:before {
...
top: -13.7px;
May be that can help you ?
Another posibility would be to change the way you create the hexagon. Instead of the triangles way, you can try the multi-background way:
.hexagon {
position: absolute;
left: 20px;
top: 20px;
font-size: 80px;
height: 2em;
width: 1.732em;
background-size: 50.5% 50.5%;
background-image: -webkit-linear-gradient(300deg,transparent 33%, red 0%), -webkit-linear-gradient(240deg,transparent 33%, red 0%), -webkit-linear-gradient(60deg,transparent 33%, red 0%), -webkit-linear-gradient(120deg,transparent 33%, red 0%);
background-repeat: no-repeat;
background-position: top left, top right, bottom left, bottom right;
}
It's responsive em based, so that it can fit your need quite well.
demo