background-attachment: исправлено, не работает на Android Chrome - PullRequest
Новая
       22

background-attachment: исправлено, не работает на Android Chrome

2 голосов
/ 28 марта 2019

background-attachment: fixed работает в Desktop Firefox, Android Firefox и Desktop Chrome, но не работает в Android Chrome.

Варианты этой проблемы были описаны в других местах Stackoverflow, но мой пример несколько отличается от того, чтодругие в том смысле, что другие обычно нацелены на фоновое изображение для всего окна просмотра, в то время как мое предназначено для отображения в качестве фиксированного фона, просматриваемого за дивом, когда пользователь прокручивает его.

Протестированные устройства: Windows 8.1 Chrome Desktop:Версия 73.0.3683.86 (Официальная сборка) (64-разрядная версия)

Android 4.4.4;XT1080 Build / SU6-7.7 Chrome 73.0.3683.90

Я построил простую иллюстрацию этого с помощью этого CodePen:

https://codepen.io/bmt-codepen/pen/drxbpN

Но код достаточно прост: 

<!DOCTYPE html>
<html lang=en>
    <head>
    <meta charset=utf-8>
    <title>Fixed Problem</title>
    <meta name=viewport content="width=device-width, initial-scale=1">
<!-- https://codepen.io/bmt-codepen/pen/drxbpN -->
<style>
body {
    margin: 0;
    padding: 1em;
}

.fixed {
    height: 100%;
    position: relative;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: 100%;
    padding: 1em;
    color: white;
}

.image1 {
    background-image: url('https://images.unsplash.com/photo-1515694346937-94d85e41e6f0');
}
.image2 {
    background-image: url('https://images.unsplash.com/photo-1534274988757-a28bf1a57c17');
}

</style>
</head>
<body>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sapien felis, placerat at sollicitudin sed, eleifend at dolor. Aliquam vulputate dolor quam, sit amet lobortis eros ornare id. Sed et nunc et nulla vestibulum pretium. Nulla sem leo, scelerisque at purus quis, viverra posuere mauris. Pellentesque lobortis porttitor nibh, non venenatis ante efficitur at. Cras leo purus, porttitor eu vestibulum nec, vehicula congue ligula. Aenean ornare ac arcu sit amet vehicula. In molestie, lacus et vulputate vehicula, leo elit consectetur sem, sit amet rutrum mauris elit non dui. Vivamus viverra metus id venenatis commodo. Mauris blandit pellentesque ipsum non sollicitudin. Praesent lobortis velit quis nibh auctor, vitae dapibus elit commodo.</p>
        <p>Donec eget tellus id lacus bibendum cursus. Duis in ultricies urna. Aliquam lacinia, libero sed laoreet rhoncus, metus mauris placerat odio, sollicitudin sollicitudin diam justo vel mauris. Vestibulum non lacus lectus. Aenean interdum sagittis erat in iaculis. Nunc fermentum nisl at dui ultrices, sit amet viverra tellus tincidunt. Praesent at mauris eleifend, aliquet quam id, laoreet justo. Nulla malesuada finibus dui ac luctus. Vestibulum facilisis justo fermentum tincidunt efficitur. Maecenas suscipit ligula neque, sit amet pharetra magna placerat id. Suspendisse potenti. Donec erat ex, gravida sit amet risus nec, cursus facilisis ante. Proin ac massa accumsan, ullamcorper erat ac, laoreet orci. Nulla sollicitudin urna enim, nec porttitor tortor egestas ut. Etiam at justo quis metus maximus ultricies quis eu quam. Integer gravida nisl sem, nec porta tellus consequat eget.</p>
        <p>Quisque cursus, metus a sollicitudin pharetra, lorem odio fringilla arcu, non eleifend urna tellus vel nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam a rutrum est. Etiam et sem vitae sapien tempor rutrum nec vulputate ex. Vestibulum eu vehicula tortor. Curabitur nulla velit, bibendum id varius non, pulvinar lobortis mi. Praesent tempor ex vel odio posuere, sed semper enim lacinia.</p>
    </div>
    <div class="fixed image1">
        <h1>The background fails to remain fixed on Chrome for Android</h1>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sapien felis, placerat at sollicitudin sed, eleifend at dolor. Aliquam vulputate dolor quam, sit amet lobortis eros ornare id. Sed et nunc et nulla vestibulum pretium. Nulla sem leo, scelerisque at purus quis, viverra posuere mauris. Pellentesque lobortis porttitor nibh, non venenatis ante efficitur at. Cras leo purus, porttitor eu vestibulum nec, vehicula congue ligula. Aenean ornare ac arcu sit amet vehicula. In molestie, lacus et vulputate vehicula, leo elit consectetur sem, sit amet rutrum mauris elit non dui. Vivamus viverra metus id venenatis commodo. Mauris blandit pellentesque ipsum non sollicitudin. Praesent lobortis velit quis nibh auctor, vitae dapibus elit commodo.</p>
        <p>Donec eget tellus id lacus bibendum cursus. Duis in ultricies urna. Aliquam lacinia, libero sed laoreet rhoncus, metus mauris placerat odio, sollicitudin sollicitudin diam justo vel mauris. Vestibulum non lacus lectus. Aenean interdum sagittis erat in iaculis. Nunc fermentum nisl at dui ultrices, sit amet viverra tellus tincidunt. Praesent at mauris eleifend, aliquet quam id, laoreet justo. Nulla malesuada finibus dui ac luctus. Vestibulum facilisis justo fermentum tincidunt efficitur. Maecenas suscipit ligula neque, sit amet pharetra magna placerat id. Suspendisse potenti. Donec erat ex, gravida sit amet risus nec, cursus facilisis ante. Proin ac massa accumsan, ullamcorper erat ac, laoreet orci. Nulla sollicitudin urna enim, nec porttitor tortor egestas ut. Etiam at justo quis metus maximus ultricies quis eu quam. Integer gravida nisl sem, nec porta tellus consequat eget.</p>
        <p>Quisque cursus, metus a sollicitudin pharetra, lorem odio fringilla arcu, non eleifend urna tellus vel nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam a rutrum est. Etiam et sem vitae sapien tempor rutrum nec vulputate ex. Vestibulum eu vehicula tortor. Curabitur nulla velit, bibendum id varius non, pulvinar lobortis mi. Praesent tempor ex vel odio posuere, sed semper enim lacinia.</p>
    </div>
    <div class="fixed image2">
        <h1>The background fails to remain fixed on Chrome for Android</h1>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sapien felis, placerat at sollicitudin sed, eleifend at dolor. Aliquam vulputate dolor quam, sit amet lobortis eros ornare id. Sed et nunc et nulla vestibulum pretium. Nulla sem leo, scelerisque at purus quis, viverra posuere mauris. Pellentesque lobortis porttitor nibh, non venenatis ante efficitur at. Cras leo purus, porttitor eu vestibulum nec, vehicula congue ligula. Aenean ornare ac arcu sit amet vehicula. In molestie, lacus et vulputate vehicula, leo elit consectetur sem, sit amet rutrum mauris elit non dui. Vivamus viverra metus id venenatis commodo. Mauris blandit pellentesque ipsum non sollicitudin. Praesent lobortis velit quis nibh auctor, vitae dapibus elit commodo.</p>
        <p>Donec eget tellus id lacus bibendum cursus. Duis in ultricies urna. Aliquam lacinia, libero sed laoreet rhoncus, metus mauris placerat odio, sollicitudin sollicitudin diam justo vel mauris. Vestibulum non lacus lectus. Aenean interdum sagittis erat in iaculis. Nunc fermentum nisl at dui ultrices, sit amet viverra tellus tincidunt. Praesent at mauris eleifend, aliquet quam id, laoreet justo. Nulla malesuada finibus dui ac luctus. Vestibulum facilisis justo fermentum tincidunt efficitur. Maecenas suscipit ligula neque, sit amet pharetra magna placerat id. Suspendisse potenti. Donec erat ex, gravida sit amet risus nec, cursus facilisis ante. Proin ac massa accumsan, ullamcorper erat ac, laoreet orci. Nulla sollicitudin urna enim, nec porttitor tortor egestas ut. Etiam at justo quis metus maximus ultricies quis eu quam. Integer gravida nisl sem, nec porta tellus consequat eget.</p>
        <p>Quisque cursus, metus a sollicitudin pharetra, lorem odio fringilla arcu, non eleifend urna tellus vel nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam a rutrum est. Etiam et sem vitae sapien tempor rutrum nec vulputate ex. Vestibulum eu vehicula tortor. Curabitur nulla velit, bibendum id varius non, pulvinar lobortis mi. Praesent tempor ex vel odio posuere, sed semper enim lacinia.</p>
    </div>
</body>
</html>

Кто-нибудь знает решение или обходной путь, касающийся стиля этого конкретного примера?

1 Ответ

0 голосов
/ 28 марта 2019

Это должно работать для вас.Это распространенная проблема на некоторых устройствах.Надеюсь, это поможет. 

 .fixed {
    background-image: url('https://images.unsplash.com/photo-1515694346937-94d85e41e6f0');
  background-attachment:scroll;
  background-position:left bottom;
  background-size:cover;
}

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('.fixed').css('background-position', 'left ' + -((scrolledY)) + 'px');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...