Caption in Safari is not centered vertically

Question

So this issue has been bugging me for quite a while. I have this div container that centers an overflow image to the center.

However in Safari, the icon inside the div is not positioned in the center. Instead it is at the top. It works fine in other browsers though. Only Safari has this bug.

I attached a fiddle below. Appreciate any help! :)

JSfiddle demo

var $container = $('#page');
$container.masonry({
  columnWidth: '.grid-sizer',
  itemSelector: '.item',
  percentPosition: true,
  gutter: 10
});

#page .item {
  width: calc(16.66% - 10px);
  display: inline-block;
  height: 0;
  float: left;
  padding-bottom: 16.66%;
  overflow: hidden;
  background-color: salmon;
  margin: 5px;
  position: relative;
}
#page .item.s1 {
  width: calc(50% - 10px);
  padding-bottom: 50%;
  overflow: hidden;
  background-color: navy;
}
.item > a {
  /* position: relative; */
  display: block;
  overflow: hidden;
  color: white;
}
.item:hover .grid-image:after {
  background: rgba(0, 0, 0, .7);
}
.item:hover .grid-image > img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.item:hover .item-caption {
  opacity: 1;
  z-index: 3;
  visibility: visible;
}
.item-caption,
.grid-image > img,
.grid-image:after {
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.item-caption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  text-align: center;
  opacity: 0;
  display: table;
  height: 100%;
  width: 100%;
}
.item-caption > div {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
.grid-image {
  position: relative;
  overflow: hidden;
}
.grid-image img {
  display: block;
  overflow: hidden;
}
.grid-image:after {
  position: absolute;
  display: block;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container-fluid">

  <div id="page">

    <!-- GRID ITEM -->
    <div class="item s1">
      <a href="#">
        <div class="grid-image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Pleiades_large.jpg/1024px-Pleiades_large.jpg">
        </div>
        <div class="item-caption">
          <div>
            <h5>I want this to be center</h5>
          </div>
        </div>
      </a>
    </div>
    <!-- /GRID ITEM -->

  </div>
</div>



</body>

</html>