mobile safari rendering buttons with border

Question

I have a set of buttons and they are rendering strangely in mobile safari. There is an uneven border around each one.

That is how they appear on mobile safari, and below is how they appear in every other browser.

The code I have for the buttons is:

        <div id="buttonbox">
    <div id="button1" class="buttons"><a href="one/two-wrong.html?">2 CHOICE1</a></div>
    <div id="button2" class="buttons"><a href="one/two-wrong.html?">2 CHOICE2</a></div>
    <div id="button3" class="buttons"><a href="one/two-right.html?">2 CHOICE3</a></div>
    <div id="button4" class="buttons"><a href="one/two-wrong.html?">2 CHOICE4</a></div>
</div>

   #buttonbox{
    position:relative; 
    top:500px;           
    padding:40px;
    }

    .buttons a{
    color:black;
    text-decoration:none;   
    }

    .buttons, .buttons:active, .buttons:focus{
     border:none;
    outline:none;

    }

    .buttons{
    background-color:#aaa;
    outline:none;
    border:none;
    width:100px;
    padding:5px;
    opacity:0;   


    animation: buttonFade;
    animation-iteration-count: once;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    animation-delay:2s;


    -webkit-animation-name: buttonFade;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-delay:2s; 
    }

    @keyframes buttonFade {
    from {opacity: 0;}
    to {opacity: 1;}
    }
    @-webkit-keyframes buttonFade {
    from {opacity: 0;}
    to {opacity: 1;}
    }

I am not sure if there is a way to get around this, as it seems to be a safari problem, but I would really appreciate any advice!