Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
tmb-github opened this issue Mar 28, 2019 · 0 comments
Open

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

tmb-github opened this issue Mar 28, 2019 · 0 comments

Comments

@tmb-github
Copy link

tmb-github commented Mar 28, 2019 •
edited
Loading

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@tmb-github