css - iOS Safari Buttons Not Perfect Circles -

i have basic nav carousel, using ul, li's , buttons. can see basic version of i'm talking here:

http://jsfiddle.net/bootsified/2he1px5c/

in browsers ios safari, buttons appear perfect circles. in ios safari, though, appear ovals. here screenshots of i'm talking about:

http://boots.media/assets/img/dots-screenshot.png

i've tweaked can think of, way can ios safari make perfect circles use "magic numbers" , browser detection. it's basic, can't imagine wrong. ideas out there?

thanks!

disclaimer: don't have iphone here, nor indeed device can run safari, can't tell certainty if going work.

however, noticed on computer, circles weren't round either. , bit of experimenting found when font size not 16px, shape off.

i updated fiddle font-size body, can see yourself. here.

turned out problem padding of button. apparently, has default padding in pixels, not same horizontally , vertically, if add

padding:0; 

(or value is same horizontally , vertically) css, buttons round, no matter font size.

* {    box-sizing: border-box;  }  ul {    list-style: none;    text-align: center;  }  li {    display: inline-block;    height: 1em;    margin: 0 0.5em;    width: 1em;  }  button {    padding: 0;    background-color: #ccc;    border: 2px solid #000;    border-radius: 50%;    height: 100%;    width: 100%;    text-indent: -999em;    overflow: hidden;    text-align: left;    direction: ltr;    display: block;    cursor: pointer;    -webkit-appearance: none;  }

<ul>    <li><button type="button" role="none">1</button></li>    <li><button type="button" role="none">2</button></li>    <li><button type="button" role="none">3</button></li>    <li><button type="button" role="none">4</button></li>  </ul>

but again, can't test on safari here, may not solution you. let me know if works!