Я столкнулся с необъяснимым дополнительным полем или ошибкой абсолютного положения в Google Chrome для изображений, размещенных в фоновом видео-контейнере.Safari работает нормально и по назначению.
Mac OS X Safari:
Mac OS X Google Chrome:
HTML:
<div class="video-background video-background-parallax">
<video playsinline autoplay muted loop id="bgvid">
<source src="/assets/img/intro-video.webm" type="video/webm">
<source src="/assets/img/intro-video.mp4" type="video/mp4">
</video>
<img src="/assets/img/pattern_l.png" class="video-pattern left"/>
<img src="/assets/img/pattern_r.png" class="video-pattern right"/>
</div><!--videobackground-->
CSS:
.video-background {
background: #000;
position: relative;
width: 100%;
height: 100%;
}
.video-background-parallax {
width: 100%;
height: 60%;
position: relative;
}
video#bgvid {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
z-index: 1;
background-size: cover;
object-fit: cover;
}
.video-pattern{
position:absolute;
width:20%;
height:auto;
z-index:2;
opacity:1;
margin:0;
padding:0;
}
.video-pattern.left{
top:0;
left:0;
}
.video-pattern.right{
bottom:0;
right:0;
}