react-sortable-hoc icon indicating copy to clipboard operation
react-sortable-hoc copied to clipboard

Safari 'sortable helper' is invisible issue

Open Werocky1502 opened this issue 5 years ago • 2 comments

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?

Werocky1502 avatar Dec 20 '19 15:12 Werocky1502

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.

OntZ avatar Feb 13 '20 14:02 OntZ

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.

gsouf avatar Jan 21 '23 13:01 gsouf