Why does setting background-attachment to fixed change the width-behaviour of the background?

问题

I've built a Fluent-Design like scrollbar with CSS and JS (github repo). The scrollbar normally works fine, but when setting the background-attachment: fixed for the element containing a background image (the body or any child) it breaks: If I change the scrollbars width by making it partially transparent, the transparent region is rendered white (the bodys background-color) and the image is not continued to be displayed behind the scrollbar; And if I change the scrollbars width directly (source) the backgrounds width changes while the elements width stays completely the same (=> the element is continuing behind the scrollbar, but its background is not).

Here's a short example of what I mean:

(1) Working properly without background-attachment: fixed:

<script src="https://tim-greller.de/git/fluent/scrollbar/scrollbar.js"></script>
<link href="https://tim-greller.de/git/fluent/scrollbar/scrollbar.css" rel="stylesheet"/>

<body class="light" style="background: linear-gradient(50deg, #fde6a5, #fac1f8);">
  <div id="content" style="height: 200vh">
    content
  </div>
</body>

(2) Now with the background fixed, which shows only white behind the transparent parts of the scrollbar:

<script src="https://tim-greller.de/git/fluent/scrollbar/scrollbar.js"></script>
<link href="https://tim-greller.de/git/fluent/scrollbar/scrollbar.css" rel="stylesheet"/>

<body class="light" style="
            background: linear-gradient(50deg, #fde6a5, #fac1f8);
            background-attachment: fixed;">
  <div id="content" style="height: 200vh">
    content
  </div>
</body>

edit: using https links.

来源：https://stackoverflow.com/questions/63905430/why-does-setting-background-attachment-to-fixed-change-the-width-behaviour-of-th

标签

javascript

html

css