I'm using react-dnd to render a list of items and having trouble using a background panel that has an image with background-attachment: fixed;
Using this background, in Chrome, I cannot scroll the page with the trackpad/wheel while dragging an element. Changing the image to a solid color works. Removing the background-image works.
Chrome version: Version 99.0.4844.51 (Official Build) (arm64)
Safari appears to work OK.
Here is a codesandbox to illustrate: https://codesandbox.io/s/drag-scroll-bug-w-background-attachment-fixed-et77jm?file=/src/styles.scss
It uses a simple example from react-dnd with a direct child of the DOM for the background-image.
Anyone have ideas about how this can be fixed? I know there have been performance issues with background-attachment: fixed, but this appears to just 100% not work.
Note: In this trivial example, background-attachment: fixed is not necessary, but it illustrates the bug very simply. In the application where this is needed, there is a lot of additional complexity that does require using it.
The basic setup is:
<body>
<div id="root">
<!-- REACT-DND-EXAMPLE -->
</div>
<div class="bg-attach-fixed"></div>
</body>
body {
position: relative;
margin: 0;
padding: 20px 40px;
}
#root {
height: 100%;
min-height: 100vh;
position: relative;
z-index: 1;
}
div.bg-attach-fixed {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
position: relative;
overflow: hidden;
&::before {
/* Comment out the background image and it works fine */
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg");
background-position: center;
background-size: cover;
background-attachment: fixed;
content: '';
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
will-change: transform;
z-index: -1;
}
}