When trying to use a fixed position, the draggable objects are not well detected

[tristan-garaud]

Expected behavior

When dragging over a position fixed droppable area the detection is not detected

Actual behavior

Detection is clearly detected

Steps to reproduce

<DragDropContext
            onDragStart={() => setShowTrashZone(true)}
            onDragEnd={onDragEnd}
            <div style={{ display: 'flex', gap: 12, width: '100%', overflowX: "scroll" }}>
                {stages.map(stage => (
                    <Droppable droppableId={stage.id} key={stage.id}>
                        {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
                            <div
                                className='bgPrimaryDark'
                                ref={provided.innerRef}
                                {...provided.droppableProps}
                                style={{
                                    flex: 1,
                                    minWidth: 230,
                                    minHeight: 340,
                                    borderRadius: 8,
                                    padding: 8,
                                    boxSizing: 'border-box',
                                    opacity: snapshot.isDraggingOver ? 0.95 : 1,
                                }}
                            >
                                <div style={{ fontWeight: 600, color: '#fff', marginBottom: 8 }}>{title}</div>
                                {columns[tab.id].map((el, idx) => {
                                    return <Draggable draggableId={String(el.id)} index={idx} key={el.id}>
                                        {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
                                            <div
                                                ref={provided.innerRef}
                                                {...provided.draggableProps}
                                                {...provided.dragHandleProps}
                                                style={{
                                                    width: '100%',
                                                    userSelect: 'none',
                                                    marginBottom: 8,
                                                    opacity: snapshot.isDragging ? 0.7 : 1,
                                                    background: '#CCEEEE',
                                                    borderRadius: 8,
                                                    boxShadow: snapshot.isDragging ? '0 2px 8px rgba(0,0,0,0.15)' : 'none',
                                                    boxSizing: 'border-box',
                                                    position: 'relative',
                                                    transform: 'none',
                                                    ...provided.draggableProps.style,
                                                }}
                                            >
                                                <div>random comp</div>
                                            </div>
                                        )}
                                    </Draggable>
                                })}
                                {provided.placeholder}
                            </div>
                        )}
                    </Droppable>
                ))}
                <Droppable droppableId={'trash'} key={'trash'}>
                    {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => {
                        return (
                            <div
                                style={{
                                    display: 'flex',
                                    padding: '10px',
                                    visibility: showTrashZone ? 'visible' : 'hidden',
                                    height: snapshot.isDraggingOver ? 150 : 150,
                                    width: snapshot.isDraggingOver ? 150 : 150,
                                    background: snapshot.isDraggingOver ? '#ffff00ff' : '#ffffff90',
                                    border: '3px dotted black',
                                    borderRadius: 4,
                                    color: 'black',
                                    zIndex: 2000,
                                    position: 'fixed',
                                    bottom: 40,
                                    // left: '50%',
                                    marginLeft: 850
                                    // transform: 'translateX(-50%)'
                                }}
                                className='pempem-flex-row'
                                ref={provided.innerRef}
                                {...provided.droppableProps}
                            >
                                {/* {provided.placeholder} */}
                                <div className='pempem-flex'>
                                    <div>trash</div>
                                </div>
                            </div>
                        );
                    }}
                </Droppable>
            </div>

        </DragDropContext >

What version of @hello-pangea/dnd are you running?

"@hello-pangea/dnd": "^18.0.1",

What browser are you using?

chrome

Demo

When it's yellow it's supposed to be in the trash area.

Enregistrement.d.ecran.le.2025-10-08.a.16.47.28.mov