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

[Stephen]

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

.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%;
}

[David]

Hi there,

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

position: -webkit-sticky;

Add that property to your CSS to fix the issue.

[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%;
}

[David]

You’re welcome.

[Author]

Posts