1px line at bottom of page, but only in mobile

I’ve got a strange 1px line that appears at the bottom of my page, but only in mobile. It does not do this on desktop. The footer for some reason is adding an extra 1px line at the bottom of the page in mobile, but, again, not on desktop even though it’s the same code. It does this on all the mobile browsers I have installed. However, if I remove the footer, there is no 1px line. For some reason the footer causes this 1px added line in mobile.

You can see a comparison of mobile and desktop in the image below. I made the background color of the page red so you can see the line showing on the left on mobile. At the right, on desktop, same code, there is no offset.

The salient code around this area is very simple and would be:

* {
    margin:0;
    padding:0;
    font-family:'Encode Sans', sans-serif;
    color:#2b2b2b;
}
body {
    background:red; 
}
.content {
    width:90%;
    margin:0 auto;
}
#footer {
    height:3em;
    line-height:3em;
    background:rgba(51,128,0,0.75);
}
#footer a {
    margin-right:0.5em;
    font-size:0.9em;
    text-decoration:none;
    color:#fff;
}

<div id="footer">
        <div class="content">
            <a target="_blank" rel="nofollow" href="">Top</a><a target="_blank" rel="nofollow" href="">Privacy</a><a target="_blank" rel="nofollow" href="">Terms</a>
        </div>
</div>

Thats a part of body so if you increase the height of the footer then it will not display.
Or
Just remove the red color from the body.