0

I have a video as a background which has an overlay and then some text with buttons. It displays correctly on all browsers except Safari.

Could someone please help me make it compatible?

I'm wondering if there's a solution that I can't see before I take a different approach in doing this. Also, if there is an easier approach to do what I'm trying to do, please tell me!

By the way, I'm using Bootstrap 3.3.7

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;
}
<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>
oksite
  • 1
  • 2
  • Which version of Safari? – Jon Uleis Nov 06 '17 at 19:25
  • What specifically goes wrong? – showdev Nov 06 '17 at 19:31
  • The text and buttons disappear, but the video and overlay are intact. I'm testing my site on my phone's safari so I guess it's the latest version. – oksite Nov 06 '17 at 19:45
  • I also did a compability test on Safari 8, which returns: This value is not supported by this browser: flex – oksite Nov 06 '17 at 19:46
  • I think the `-webkit-` prefix still may be required for some CSS definitions on IOS Safari 8. For example, see [CanIUse/Flexbox](https://caniuse.com/#feat=flexbox) and [CanIUse/Transform](https://caniuse.com/#search=transform). – showdev Nov 06 '17 at 20:34
  • -webkit prefix does not change anything, just tried it – oksite Nov 06 '17 at 21:24
  • -webkit- prefix is also different for flex I think its is `-webkit-box` you could also try pasting your code in autoprefixer https://autoprefixer.github.io/ – Enjayy Nov 06 '17 at 21:33
  • Could be a [stacking](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) issue? See [webkit-transform breaks z-index on Safari](https://stackoverflow.com/questions/22621544/webkit-transform-breaks-z-index-on-safari). I could reproduce the problem in Safari 11 and had some success by setting `position:relative;z-index:2;` on `.header-content`. – showdev Nov 06 '17 at 21:35
  • position: relative fixed it. Thank you so much! :) – oksite Nov 06 '17 at 21:45

0 Answers0