search

clauderic / react-sortable-hoc

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
https://clauderic.github.io/react-sortable-hoc/
MIT License
10.8k stars 980 forks source link

Safari 'sortable helper' is invisible issue #651

Open Werocky1502 opened 4 years ago

Werocky1502 commented 4 years ago

This issue is quite similar to issue #630 with sortable-helper "behind" popup. But it is specific to Safari. There are few cases when Safari calculates z-index-es in strange way and you need to apply css-transformations to force sortable clone appearing above popup.

There is quite simple PR #605 which can help with this issue -- it allows you to apply custom css-transformations to helper and I believe that it can help in my case.

Is there any chances for this PR to be reviewed and merged?

Does anybody know any another solutions for using of react-sortable-hoc along with popups and Safari?

OntZ commented 4 years ago

In case this helps anyone bypass this issue on Safari (and potentially others):

A coworker suggested using the helperContainer prop on the SortableContainer hoc and passing into it a ref from a div within the popup.

We have a popup with position: fixed and the helper element (the one that's moving with the mouse) also has position: fixed, but because it is rendered as a direct child of body it will stack relative to the body's stacking context and as such it goes behind the popup, as @Werocky1502 mentioned, so we're not seeing it. If however helperContainer points to a div which is a descendent of the popup, the element will be visible because it will be situated above the popup's stacking context.

gsouf commented 1 year ago

Got the same issue with z-index conflict with a popup. Got it fixed by just setting a proper z-index on the helper element using helperClass.