1

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

Some red border

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

4

1 回答 1

0

一种简单的解决方法是在元素中添加一个固定<body>元素。该元素将覆盖整个视口区域并包含背景。因为它不会滚动，background-attachment: fixed;所以不需要。

<body>
  <div class="body-bg"></div>
  (Content here...)
</body>

body {
  position: relative;
}

.body-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('https://picsum.photos/id/237/200/300');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
于 2022-02-17T07:34:11.870 回答