why does display:table break absolute position on safari only?

Question

how it should be and looks on chrome and firefox:

how it looks on safari:

removing display:table fixes the positioning, but i need that for the styling (equal size tabs no matter the size of content):

pen

(it does seem like the display: table has a TINY effect on the positioning in chrome in the codepen, this isn't happening in my app, but that just makes this even weirder)

relevant code:

<div class="contain">
  <div class="row">
    <div class="col-md-9">
      <div class="panel profile-header">

        <ul class="nav nav-tabs profile-mobile-tabs row" role="tablist">
          <li role="presentation" class="active col-xs-4"><a>Activity</a></li>
          <li role="presentation" class="col-xs-4"><a>Events</a></li>
          <li role="presentation" class="col-xs-4"><a>Relationships</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>


.contain {
  width: 100rem;
}

.profile-header {
  position: relative;
  padding: 10px;
  background-color: gray;
  margin-bottom: 4rem;
  .row {
    margin: 0;
  }
}


.profile-header > .profile-mobile-tabs {
  display: table;
  table-layout: fixed;
  position: absolute;
  bottom: -2.5rem;
  right: 0;
  width: 100%;
  border: 0;
  background-color: darkgray;
  > li {
    display: table-cell;
    //width: 1%;
    float: none;
    padding: 0;
    > a {
      text-align: center;
      margin: 0;
      border-radius: 0;
      border: 0;
    }
  }
}

Answer 1

I'm not sure what causes this but I had the same issue and I solved it by wrapping the display:table element in a container div, and moving the positioning attributes into the attributes of that container div.

For example:

Before:

.table {
  display: table;
  position: absolute;
  left: 0;
  right: 300px;
}

After:

.table-container {
  position: absolute;
  left: 0;
  right: 300px;
}

.table {
  display: table;
}