День добрый подскажите как убрать дерганье фона у у изображения модального окна которые на странице расположены свойством
position: fixed.
Код сократил по максимуму.
<body style="overflow: hidden; position: fixed; top: -900px; left: 0px; width: 100%;">
<div class="application">
<div class="page place-page">
<div class="page-content place-page-content"><span class="top-icon"></span>
<div class="task-list mt-md">
<div>
<div class="task-item">
<div class="task-item-text">
<div class="task-item__heading">100 Points</div>
<div class="task-item__label">Follow on Instagram</div>
</div>
</div>
<div class="application-roll"><button class="hide-roll"><i class="material-icons">chevron_left</i></button>
<div class="application-roll-wrap">
<div class="application-roll__background">
<img src="https://venuepage.io//sites/assets/images/bg-stories-ig.jpg" alt="">
</div>
<div class="task-detail">
<div class="task-detail-content"><span class="top-icon"></span>
<header class="task-detail-header">
<div class="task-detail-header__points"><span class="amount">+100</span> <span
class="currency">Points</span></div>
<div class="task-detail-header__description">
Lorem ipsum dolor sit amet.
</div>
</header>
<section class="mt-md">
<header class="section__title">Details</header>
<div class="section-content">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
.application-roll {
padding: calc(100vw - 25px) 30px 30px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
background-color: #fff;
z-index: 10
}
.application-roll.application-roll_without-bg {
padding-top: 95px
}
.application-roll .application-roll__background {
position: fixed;
top: 0;
left: 0;
height: auto;
width: 100%;
height: 100vw;
z-index: -1;
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
pointer-events: none
}
.application-roll .application-roll-wrap {
margin-left: -30px;
margin-right: -30px;
padding-left: 30px;
padding-right: 30px;
position: relative;
background-color: #fff
}
.application-roll .application-roll-content {
position: relative;
padding-top: 3rem
}
.application-roll .hide-roll {
padding: 0;
position: fixed;
top: 43px;
left: 33px;
width: 39.9px;
height: 39.9px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 6px 7px rgba(0, 0, 0, .1);
border: none
}
