Как в хроме исправить подгрузку текста в блоке при резкой прокрутки страницы?
На сайте есть модальное окно с политикой конфендициальности. Из за того, что в нем много текста, когда быстро прокручиваешь весь блок просто плывет. Можно ли это исправить? Данная проблема только в хроме.
<div class="modal__content">
<div class="modal__close--policy">
<span></span>
</div>
<div class="policy__wrap">
<p class="policy__header">Политика в отношении обработки персональных данных</p>
<p class="policy__title">1. Общие положения</p>
</div>
@function vw($value, $base: 1920){
@return $value / $base * 100vw;
}
@function vmin($value, $base: 428){
@return $value / $base * 100vw;
}
body{
background: #182B2C;
}
.modal__content{
position: absolute;
left: 50%;
top: vw(150);
transform: translateX(-50%);
z-index: 999999;
width: vw(1172);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0px vw(21) vw(74) rgba(0, 0, 0, 0.25);
backdrop-filter: blur(vw(20));
border-radius: vw(41);
padding: vw(45) vw(30);
&::before{
content: '';
position: absolute;
inset: 0;
border-radius: vw(41);
padding: vw(1);
background: linear-gradient(179.22deg, rgba(175, 253, 255, 0) 0.7%, #AFFDFF 52.82%, rgba(175, 253, 255, 0) 100.77%),
linear-gradient(89.92deg, rgba(175, 253, 255, 0) -1.09%, #AFFDFF 51.52%, rgba(175, 253, 255, 0) 99.92%);
-webkit-mask:
linear-gradient(white 0 0) content-box,
linear-gradient(white 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
}
p.policy__header{
font-size: vw(36);
color: white;
}
p.policy__title{
font-size: vw(24);
padding-top: vw(30);
text-align: left;
padding-bottom: vw(15);
color: white;
}
p.policy__text{
font-size: vw(18);
color: white;
text-align: left;
}
.policy__wrap{
li{
font-size: vw(18);
color: white;
text-align: left;
padding-left: vw(30);
padding-top: vw(15);
line-height: 120%;
}
}
Ссылка на codepen.