В фиксированном меню при вертикальной прокрутке дергается содержимое Почему?
.mobile-fixed-menu {
position: fixed;
background-color: rgb(0, 0, 0, 0.6);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 200;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
}
.mobile-fixed-menu-header {
display: flex;
align-items: center;
padding: 0 15px;
height: 55px;
border-bottom: 1px solid #e9e9e9;
position: relative;
box-shadow: 0 2px 8px #00000014;
z-index: 1;
background: white;
}
.mobile-fixed-menu-content {
overflow: auto;
height: calc(100% - 50px);
padding: 0px 10px 0px 10px;
background: #F7F8FA;
}
.mobile-fixed-menu_link-category {
margin-bottom: 5px;
padding: 15px 10px 15px 15px !important;
color: #514E5E !important;
font-size: 13px;
font-weight: 600;
}
.mobile-fixed-menu-content-link a {
display: block;
width: 100%;
padding: 8px 15px;
text-decoration: none;
color: #514E5E;
border-radius: 10px;
margin-top: 10px;
border: 1px solid #E9E9E9;
box-shadow: 0 0 10px rgb(0 0 0 / 10%);
background: white;
text-transform: uppercase;
}
.mobile-fixed-menu_link-category.all-category-mobile-menu {
background: #706D97;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
border: 0;
color: white !important;
}
.mobile-fixed-menu-content-link a:first-child {
margin-bottom: 10px !important;
}
.mobile-fixed-menu-content-link a:last-child {
margin-bottom: 15px;
}
.all-category-mobile-menu-block {
display: flex;
justify-content: center;
align-items: center;
}
.mobile-fixed-menu_name-category {
display: flex;
align-items: center;
}
.mobile-fixed-menu_count-category {
font-size: 13px;
color: #595567;
font-weight: 600;
line-height: 20px;
text-transform: none;
}
.mobile-fixed-menu_link-category-all-block {
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-fixed-menu_link-category-block-img {
display: flex;
align-items: center;
}
.header-wow-mobile-category-image-menu {
width: 70px;
height: 70px;
text-align: center;
margin-bottom: 5px;
display: inline-block;
margin-right: 15px;
}
img {
vertical-align: middle;
border-style: none;
}
.mobile-fixed-menu_link-category-block-name-category-count {
display: flex;
flex-direction: column;
}
.la-angle-right:before {
content: "\f105";
}
.mobile-fixed-menu_link-category-all-block i {
font-size: 30px;
color: #514E5E;
font-weight: bolder;
}<div class="mobile-fixed-menu mobile-fixed-menu_all-category" style="display: block;">
<div class="mobile-fixed-menu-header">
<span class="mobile-fixed-menu-header-close"><i class="las la-times"></i></span> <span class="mobile-fixed-menu-header-title">Меню категорий</span>
</div>
<div class="mobile-fixed-menu-content mobile-fixed-menu-content-link">
<div>
<a class="mobile-fixed-menu_link-category all-category-mobile-menu" data-parent="false" href="https://nuva.com.ua/ru/ukraine">
<div class="all-category-mobile-menu-block">
<span class="mobile-fixed-menu_name-category"><svg class="ui-e2" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="m5.49718 3.00617 4.50169-.00507c.55343 0 1.00113.44771 1.00113 1v5.99887c0 .55233-.4477 1.00003-1 1.00003h-6c-.55228 0-1-.4477-1-1.00003v-4.4938c0-1.37961 1.11757-2.49844 2.49718-2.5zm-1.49831 10.00173c-.55184.0006-.99887.4481-.99887 1v4.4921c0 1.3807 1.11929 2.5 2.5 2.5h4.5c.5523 0 1-.4477 1-1v-5.9989c0-.5523-.4477-1-1.00113-1zm10.00003 0c-.5519.0006-.9989.4481-.9989 1v5.9921c0 .5523.4477 1 1 1h4.5c1.3807 0 2.5-1.1193 2.5-2.5v-4.4989c0-.5523-.4477-1-1.0011-1zm0-10.00004c-.5519.00063-.9989.44816-.9989 1v5.99211c0 .55233.4477 1.00003 1 1.00003h6c.5523 0 1-.4477 1-1.00003v-4.49718c0-1.38071-1.1193-2.5-2.5028-2.5zm-8.9989 15.49214c0 .2761.22386.5.5.5h3.5v-3.9978l-4 .0045zm13.5.5h-3.5v-3.9933l4-.0045v3.4978c0 .2761-.2239.5-.5.5zm-9.5-10.00003v-3.99774l-3.50056.00394c-.27593.00031-.49944.22408-.49944.5v3.4938zm10 0h-4v-3.99323l3.5-.00395c.2761 0 .5.22386.5.5z" fill="currentColor" fill-rule="evenodd"></path></svg> Все категории 13</span> <span class="mobile-fixed-menu_count-category"></span>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
<div class="block-category-load">
<a class="mobile-fixed-menu_link-category" data-id="440" data-parent="true" href="https://nuva.com.ua/ru/ukraine/mobile-devices">
<div class="mobile-fixed-menu_link-category-all-block">
<div class="mobile-fixed-menu_link-category-block-img">
<img alt="Мобильные устройства" class="header-wow-mobile-category-image-menu" src="https://nuva.com.ua/media/others/e044c1cf8863ee08335ec83b1f8d0ae5.png">
<div class="mobile-fixed-menu_link-category-block-name-category-count">
<span class="mobile-fixed-menu_name-category">Мобильные устройства</span> <span class="mobile-fixed-menu_count-category">Объявлений <strong class="get-counter-ad-category"></strong></span>
</div>
</div>
<div class="angle-right">
<i class="las la-angle-right"></i>
</div>
</div></a>
</div>
</div>
</div>Подскажите, не могу разобраться есть фиксированное меню с вертикальной прокруткой, при скроле на мобильном устройстве содержимое дергается рывками и сам скрол тоже, в чём может быть причина ?? Может и глупый вопрос но решение не могу найти 2 день, анимации нет, скриптов нет к скролу. В чём причина может быть ?
Ответы (1 шт):
Автор решения: Андрей Черёмушкин
→ Ссылка
Действительно, причина была найдена в размытом фоне сайта backdrop-filter: blur(2px); при открытии фиксированного меню.
Размытие backdrop-filter: blur(2px); дает дергание и затормаживание блоков ссылок при прокрутке контента. Может кому-то будет полезно. Причина воздействия не объяснима.