Estoy usando react-dnd para representar una lista de elementos y tengo problemas para usar un panel de fondo que tiene una imagen con background-attachment: fixed;
Usando este fondo, en Chrome, no puedo desplazarme por la página con el trackpad/rueda mientras arrastro un elemento . Cambiar la imagen a un color sólido funciona. Quitar la imagen de fondo funciona.
Versión de Chrome: versión 99.0.4844.51 (compilación oficial) (arm64)
Safari parece funcionar bien.
Aquí hay un codesandbox para ilustrar: https://codesandbox.io/s/drag-scroll-bug-w-background-attachment-fixed-et77jm?file=/src/styles.scss
Utiliza un ejemplo simple de react-dnd con un elemento secundario directo del DOM para la imagen de fondo.
¿Alguien tiene ideas sobre cómo se puede solucionar esto? Sé que ha habido problemas de rendimiento con background-attachment: fixed , pero parece que esto no funciona al 100%.
Nota: En este ejemplo trivial, background-attachment: fixed no es necesario, pero ilustra el error de forma muy sencilla. En la aplicación donde se necesita esto, hay mucha complejidad adicional que requiere su uso.
La configuración básica es:
<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; } }