MobileChromeApps / mobile-chrome-apps

Chrome apps on Android and iOS
BSD 3-Clause "New" or "Revised" License
2.5k stars 347 forks source link

background-attachment: fixed does not work on Android Chrome #625

Open tmb-github opened 5 years ago

tmb-github commented 5 years ago

background-attachement: fixed works correctly on Chrome for desktop but fails on Chrome for Android. It works correctly on Firefox for desktop and Firefox for Android.

Devices tested: Windows 8.1 Chrome Desktop: Version 73.0.3683.86 (Official Build) (64-bit)

Android 4.4.4; XT1080 Build/SU6-7.7 Chrome 73.0.3683.90

I've built a simple illustration of this with this CodePen:

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

Here is that code:

<!DOCTYPE html>
<html lang=en>
<!-- https://codepen.io/bmt-codepen/pen/drxbpN -->
    <head>
    <meta charset=utf-8>
    <title>Fixed Problem</title>
<style>
h1 {
    padding: 5em;
    color: white;
}
.fixed {
    background-image: url('https://images.unsplash.com/photo-1515694346937-94d85e41e6f0');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: 100%;
}
</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>
        <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>