Safari显示flex问题

Question

我有一个视频作为背景，有一个叠加，然后是一些带按钮的文字。它在除Safari之外的所有浏览器上都能正确显示。

有人可以帮助我让它兼容吗？

我想知道在采取不同方法之前我是否能够找到解决方案。此外，如果有更简单的方法来做我想做的事情，请告诉我！

顺便说一下，我使用的是Bootstrap 3.3.7

＆＃13;

＆＃13;

body .home-page .vid-header {
  position: relative;
  background-position: center;
  background-size: cover;
  height: 100vh;
  display: flex;
  align-items: center;
  color: #fff;
}

body .home-page .vid-header .video-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

body .home-page .vid-header .video-wrap video {
  flex: 0 0 100%;
}

body .home-page .vid-header .header-overlay {
  height: 100vh;
  width: 100vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #1A1F41;
  z-index: 1;
  opacity: 0.91;
}

body .home-page .vid-header .header-content {
  z-index: 2;
  text-align: center;
  color: #FFF;
  overflow-x: hidden;
  margin: 0 auto;
}

＆＃13;

<div class="home-page">
  <div class="vid-header">
    <div class="video-wrap">
      <video autoplay="true" loop="true" height="1080px" width="1920px" muted>
        <source src="media/video.mp4" type="video/mp4">
      </video>
    </div>
    <div class="header-overlay"></div>
    <div class="header-content">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h1 class="text-center">Text</h1>
            <h4 class="text-center">Text</h4>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-6 col-xs-12">
            <button class="btn btn-primary btn-lg buttons h-button-second">Button</button>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <button class="btn btn-primary btn-lg buttons h-button-second">Button</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;