Safari显示转换缓入效果错误

Question

我有一个带背景的itembox，里面有一个标题和文字的文本框 悬停时，文本框会展开整个元素并显示文本 鼠标移开时，文本框缩小，只有标题再次可见 这适用于除Mac上的Safari 9.1之外的所有浏览器。

在Safari中，扩展效果有效，但在mouseout上，文本框会跳到itembox的顶部，稍微闪烁然后跳回到中间。我必须做什么才能在Safari中像其他浏览器一样工作？

以下是整个代码段http://codepen.io/anon/pen/qNOrwm

HTML

<div class="col-xs-12 col-sm-4 item">
  <div class="box item-outer" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&txt=background&w=700&h=894&bg=00F33F')">
    <div class="item-inner">
      <div class="content-wrapper">
        <div class="headline">Project</div>
        <div class="content">Lorem ipsum...</div>
      </div>
      <div class="more">
        <a href="#" class="btn btn-teaser">read more <i class="fa fa-angle-double-right"></i></a>
      </div>
      <div class="see-more">
        <div>more</div>
        <i class="fa fa-angle-double-down"></i>
      </div>
    </div>
  </div>
</div>

CSS：

.box {
  height: 0;
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 0rem;
  background-position: center center;
  background-size: cover;
}
.item .item-outer {
  background-size: cover;
  background-position: center center;
  position: relative;
  height: 0;
  padding-bottom: 140%;
  background-color: #d9e0cd;
}
.item .item-outer .item-inner {
  display: block;
  position: absolute;
  overflow: hidden;
  transition: all 0.7s ease-in-out;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 0.5rem;
  text-align: center;
  min-height: 10rem;
  top: 50%;
  bottom: auto;
  right: 0.5rem;
  left: 0.5rem;
  transform: translateY(-50%);
  margin-top: 0;
}
.item .item-outer:hover .item-inner {
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  transform: none;
}
.item .item-outer .item-inner .content-wrapper {
  position: absolute;
  top: 1rem;
  right: 1rem;
  bottom: 3rem;
  left: 1rem;
  overflow: hidden;
}
.item .item-outer .item-inner .content-wrapper .headline {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.item .item-outer:hover .item-inner .content-wrapper .content {
  color: inherit;
  display: block;
}
.item .item-outer .item-inner .content-wrapper .content {
  overflow: hidden;
  margin-bottom: 0.75rem;
  text-overflow: ellipsis;
  transition: all 0.7s ease-in-out;
  color: transparent;
  display: none;
}
.item .item-outer .item-inner .more {
  display: none;
}
.item .item-outer:hover .item-inner .more {
  display: block;
}
.item .item-outer .item-inner .more {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
}
.item .item-outer .item-inner .more .btn-teaser {
  border: 1px solid #ffffff;
  color: #ffffff;
}
.item .item-outer .item-inner .see-more {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0.25rem;
  left: 0;
}
.item .item-outer:hover .item-inner .see-more {
  display: none;
}