Question

background-attachment: fixed在台式机Firefox，Android Firefox和台式机Chrome上运行，但在Android Chrome上失败。

在Stackoverflow的其他地方已经报道了此问题的变化，但是我的示例与其他示例有所不同，因为其他示例通常将整个视口的背景图像作为目标，而我的示例是作为固定背景显示在div随着用户滚动过去。

已测试的设备： Windows 8.1 Chrome桌面：73.0.3683.86版（官方内部版本）（64位）

Android 4.4.4; XT1080内部版本/SU6-7.7 铬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>

有人知道解决此特定示例样式的解决方案或变通方法吗？

Answer 1

这应该为您工作。在某些设备上碰到是一个普遍的问题。希望有帮助。

 .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');
});

背景附件：修复了无法在Android Chrome上运行的问题

1 个答案: