I did quite some research and this issues came and went multiple times when looking at the age of various SO posts and Mozilla's bug tracker.
Each time I use
background-attachment: fixed; on something like the background of the body tag, firefox on android fails placing it correctly. It skips the bottom line where it blends in it's nav bar. But when the navbar is not shown, the background image is not part of the entire screen space.
Can this be fixed? Here is a screenshot
The red border should never be visible. Here is the css code, which in the meanwhile contains all sorts of modifications gathered from other posts
.body-bg {
background-color: red;
background-image: url('https://picsum.photos/id/237/200/300');
background-repeat: no-repeat;
background-position: center;
/* This does not properly work*/
background-attachment: fixed;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here is a html sample page, I added many br-tags have some vertical space for scrolling
<!doctype html>
<html lang="en">
<head>
<style>
.body-bg {
background-color: red;
background-image: url('https://picsum.photos/id/237/200/300');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body class="body-bg">
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
END
</body>
Any hint on how to get this handled on firefox for android would be great
One simple workaround is to add a fixed element in the
<body>element. This element will cover the whole viewport area and contain the background. As it will not scroll,background-attachment: fixed;is not needed.