Наложение не распространяется на все фоновое изображение только на мобильных устройствах - PullRequest
Новая
       13

Наложение не распространяется на все фоновое изображение только на мобильных устройствах

0 голосов
/ 13 июня 2019

В мобильной версии моего сайта фоновое изображение # l-splash занимает всю точку зрения.У меня есть прозрачный оверлей, который идет поверх фонового изображения.По какой-то причине наложение не покрывает все изображение, отображаемое при прокрутке вниз.

Показано здесь: https://imgur.com/a/7DVwHyo

Наложение хорошо отображается в инструментах разработчика Chrome, но когда я открываю сайт на реальном мобильном устройстве, он не работает.Вы можете попробовать себя на своем телефоне: https://nguyentrav.github.io/rice-paper/

Я пытался возиться с высотой # l-splash и # overlay-filter, но безуспешно.

https://jsfiddle.net/6aury4t5/3/

body 
{
  max-width: 100%;
  overflow-x: hidden;
  padding: 0px;
  margin: 0px;
}


.container 
{
  display: grid;
  grid-template-columns: [content] minmax(0,1fr) [images] minmax(0,1fr);
  grid-auto-flow: dense;
}

.content, .images 
{
  display: contents;
}

#l-splash
{
  background: url("https://images.unsplash.com/photo-1526069631228-723c945bea6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80");
  height: 100vh; 
  width: 100%;
  position: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
}

#overlay-filter
{
  display: none;
}

@media (max-width: 767.98px)
{ 
  .container
  {
    display: grid;
    grid-template-columns: [content] 100%;
  } 

  header, .images
  {
    display: none;
  }

  #overlay-filter
  {
    position: absolute;
    display: block;
    z-index: 100;
    width: 200%;
    height: 220%;
    transform: translate(-50%,-50%);
    background: rgb(172,172,172, 0.75);
  }

}

<div class="container">
   <div class="content">

     <div id= "splash-container">

        <div id="overlay-filter"></div>

        <div id = "l-splash"></div>

     </div>

  </div>
</div>

Мне бы хотелось, чтобы наложение отвечало на весь фон на любом мобильном устройстве.

Любой совет с благодарностью!

...