Archived topic
Hero Video Z-index / Position Problem on Safari
3 replies · Started by Stephen on July 11, 2019
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%;
}
Hi there,
Safari requires a prefixed version of position: sticky ie.:
position: -webkit-sticky;
Add that property to your CSS to fix the issue.
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%;
}
You're welcome.
