Здраствуйте, я начинающий web-разработчик! В процессе написания сайта я столкнулся с проблемой, того что на мобильной версии хрома при скроле фоновая картинка .wrapper мерцает. А на мобильной версии сафари не работает фиксирование фоновой картинки. Пробовал так
.wrapper{
background: url(https://irish-st.ucoz.net/images/background_image1.jpg) center center/cover no-repeat;
background-attachment: fixed;
display: flex;
min-height: 100%;
overflow: hidden;
flex-direction: column;}
Пробовал и так
.wrapper:before {
background: url(https://irish-st.ucoz.net/images/background_image1.jpg) center center / cover no-repeat;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: -1;}
также пробовал применять для родительского блока .wrapper задавать свойство transform: translate3d(0,0,0); этот вариант, тоже не помогает в сафари, и ломает ещё и в хроме то что работает. Помогите пожалуйста кто может знает как это исправить. Ссылка на сайт:https://irish-st.ucoz.net/
scss:
.wrapper:before {
background: url(https://irish-st.ucoz.net/images/background_image1.jpg) center center / cover no-repeat;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: -1;}
html:
<body class="body" >
<div class="wrapper">
<div class="container">
<header class="header">
<div class="header__top">
<div class="header__box_img">
<img class="header__img" src="https://irish-st.ucoz.net/images/top_header_image.PNG">
</div>
<div class="Text__title_1">
@irish_st
</div>
</div>
<div class="header__bottom">
<div class="header__decBlock_L"></div>
<div class="header__text Text__paragraph">
<p class="Text__paragraph">создатель контента и визуала для</p>
<p class="Text__paragraph">личных блогов/брендов/маркетплейсов</p>
</div>
<div class="header__decBlock_R"></div>
</div>
</header>
</div>
</div>
<script src="https://irish-st.ucoz.net/js/main.min.js"></script>
</body>