Child element of button not centering properly on safari with flexbox

Question

I created a small reusable class to handle any and all buttons on my site, that way they're all uniform. The button uses display:inline-flex and min-width, along with various other styles that don't appear to be relevant.

During testing, I noticed that on Safari, any <button>s with my class don't properly center their child elements. The problem appears to be the min-width: 200px, removing it or placing it on a child element instead return all visual behavior to their expected states.

I also noticed that if I invert the order of the vendor prefixes, Safari will properly center elements. However, this has side effects on buttons that have extra child elements.

Here's a snippet of the code generating my buttons.

body {
  margin: 15px;
}

body .base-btn {
  font-size: 16px;
  font-weight: 400;
  font-family: Tahoma, Arial, Helvetica, Sans-serif;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  line-height: 1.15;
  max-width: 100%;
  min-width: 200px;
  height: 56px;
  background-color: #2A51A0;
  padding: 10px 15px;
  border: 0px;
  border-radius: 20px;
  cursor: pointer;
  -webkit-transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
  transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
body .base-btn > span {
  display: block;
  position: relative;
  pointer-events: none;
}
body .base-btn:active, body .base-btn:focus, body .base-btn:hover {
  color: #2A51A0;
  text-decoration: none;
  background-color: #000;
  display: inline-flex;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: -webkit-inline-box;
}
body .base-btn + .base-btn {
  margin-left: 20px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-body">
  <button type="button" class="base-btn"><span>Click me</span></button>
  <a href="#void" class="base-btn"><span>Click me</span></a>
</div>

Child element of button not centering properly on safari with flexbox

0 Answers0