0

Здраствуйте, я начинающий 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>

1 ответ 1

0

Данное свойство не поддерживаеться в Safary браузере. Ищи альтернативу.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.