[Resolved] Hero Video Z-index / Position Problem on Safari

Home Forums Support Hero Video Z-index / Position Problem on Safari

This topic contains 3 replies, has 2 voices, and was last updated by  David 4 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #955320

    Stephen

    The hero video covers the content of the page in Safari when the height of the browser is changed (Chrome is ok).

    domesticwebdesign.com

    .background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.;
    }
    .page-hero {
    position: sticky;
    overflow: hidden;
    z-index: -1;
    padding-bottom:11%;
    }
    .background-video-content {
    position: relative;
    }
    video[poster] {
    object-fit: cover;
    width: 100%;
    height: 100%;
    }

    #955402

    David Customer Support

    Hi there,

    Safari requires a prefixed version of position: sticky ie.:

    position: -webkit-sticky;

    Add that property to your CSS to fix the issue.

    #956237

    Stephen

    It worked! Thank you!

    For others with this issue, I added the property here:

    .page-hero {
    position: sticky;
    position: -webkit-sticky;
    overflow: hidden;
    z-index: -1;
    padding-bottom:11%;
    }

    #956239

    David Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.