iOS Safari Buttons Not Perfect Circles

Question

I have a basic nav for a carousel, using a ul, li's and buttons. You can see a basic version of what I'm talking about here:

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

In all browsers but iOS Safari, the buttons appear as perfect circles. In iOS Safari, though, they appear as ovals. Here are screenshots of what I'm talking about:

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

I've tweaked all I can think of, but the only way I can get iOS Safari to make perfect circles is to use "magic numbers" and browser detection. It's so basic, I can't imagine what is wrong. Any ideas out there?

Thanks!

Answer 1

Disclaimer: I don't have an iPhone here, nor indeed any device that can run Safari, so I can't tell you with any certainty if this is going to work.

However, I noticed that on my computer, the circles weren't round either. And a bit of experimenting found that when the font size was not 16px, the shape was off.

I updated the fiddle with a font-size for the body, so you can see for yourself. Here.

Turned out the problem was the padding of the button. Apparently, it has a default padding in pixels, which is not the same horizontally and vertically, so if you just add

padding:0;

(or any value that is the same horizontally and vertically) to the CSS, the buttons are always round, no matter the 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, I can't test on Safari here, so this may not be the solution for you. Let me know if it works!