The CSS property background-attachment: fixed behaves as expected on Desktop Firefox, Android Firefox, and Desktop Chrome, but it has issues on Android Chrome.
Similar problems have been discussed on Stackoverflow before, but my scenario differs slightly from others. While most cases focus on fixing a background image for the entire viewport, my issue involves using it as a fixed background displayed behind a div element as the user scrolls past.
Devices that were tested include:
- 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 created a simple example to showcase this problem in a CodePen demonstration:
Below is a simplified version of the problematic code:
<!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...</p>
<!-- Content omitted due to length--!>
</div>
<div class="fixed image1">
<h1>The background fails to remain fixed on Chrome for Android</h1>
</div>
<!-- Additional similar div elements with different images--!>
</body>
</html>
If anyone has encountered and solved this particular issue before, I would greatly appreciate some guidance on how to address the styling problem in this specific context.