React-dnd: Question: How to make square corners transparent when dragging rounded-corner element?

Are you using a CustomDragLayer for the DragPreview? Square corners appear
along with rounder ones?

A screenshot should help see whats happening.

On Wed, 7 Jun 2017 at 00:53 nottoseethesun notifications@github.com wrote:

I have a draggable element with rounded corners, and when it is dragged,
the square corners of the element show up in a light grey color, different
from the assigned background color of the element.

I'd like that to go away, so just the element with its rounded corners
shows up.

Is there something that can be done to turn this off? Such as with a ghost
image that may be being applied?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/react-dnd/react-dnd/issues/788, or mute the thread
https://github.com/notifications/unsubscribe-auth/AA_31sMofYE49RWrSM0SvEiSJEIK9TOBks5sBacZgaJpZM4NxzBj
.

>

Regards,
Gagan

Thanks - not using CustomDragLayer; everything is plain.

On the screenshot, not possible on that unfortunately but I can describe better: The draggable is a square div about an inch on each side, with rounded corners (border radius 10px). The draggable, when dragged looks normal in all respects (it still has its rounded corners and proper color) except for one thing: Each of the four unrounded corners appear as well, as they would if there were no border radius rounding on the element, except that the color of the unrounded portion is that of the parent element of the draggable (the parent element where it was dragged from). So each rounded corner is unhappily accompanied, on Chrome browser only (not Firefox or Safari), with a little "hat" that is the rest of the surface area of the div as it would be without the rounded corners.

It is almost as if Chrome is snapshotting the div and holding that in memory. Earlier with this I actually had a problem with endDrag and when I clicked outside of the web browser on the desktop, I could see the draggable just as described.

I tried setting WebkitTapHighlightColor (React identifier format) to transparent, but that did not fix this.

That's strange. If you are not using a CustomPreview, then the exact same
thing rendered before you start dragging should be the preview (as we will
be depending on the browser snapshot of the element)

Could you check if you are doing anything extra than what is described in
this example -
http://react-dnd.github.io/react-dnd/examples-drag-around-naive.html ?

If you clone this repo and add a borderRadius to this example, you will see
it working perfectly fine!

On Wed, 7 Jun 2017 at 09:19 nottoseethesun notifications@github.com wrote:

Thanks - not using CustomDragLayer; everything is plain.

On the screenshot, not possible on that unfortunately but I can describe
better: The draggable is a square div about an inch on each side, with
rounded corners (border radius 10px). The draggable, when dragged looks
normal in all respects (it still has its rounded corners and proper color)
except for one thing: Each of the four unrounded corners appear as
well, as they would if there were no border radius rounding on the element,
except that the color of the unrounded portion is that of the parent
element of the draggable (the parent element where it was dragged from). So
each rounded corner is unhappily accompanied, on Chrome browser only (not
Firefox or Safari), with a little "hat" that is the rest of the surface
area of the div as it would be without the rounded corners.

It is almost as if Chrome is snapshotting the div and holding that in
memory. Earlier with this I actually had a problem with endDrag and when
I clicked outside of the web browser on the desktop, I could see the
draggable just as described.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/react-dnd/react-dnd/issues/788#issuecomment-306678795,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA_31vIjJk8QhGycVd78dYB1EWa_El_nks5sBh3igaJpZM4NxzBj
.

>

Regards,
Gagan

Thanks - I tried the border-radius on that example and indeed you are correct. However the reason it looks correct is because the entire work area is the same background color. Once an html element native ghost image in Chrome is dragged onto a different background color, those corners do show up. In my case, I do have that situation. It can be worked around though successfully by specifying a ghost image.

Ran into this same issue. Ultimately managed to fix it by adding transform: 'translate(0, 0)' to the node I wanted as my drag preview. Got some insights from this page: https://kryogenix.org/code/browser/custom-drag-image.html as it shows examples where the corners are there and where they are gone.

@douweknook thanks for this. Finding a solution has taken a substantial amount of time.

@douweknook awesome solution!

A simple css implementation would look something like:

    .sortable-chosen {
        transform: translate(0, 0);
    }

I would chain the .sortable-chosen to your sortable element class to ensure that the style is not globally applied. For example, if your sortable element class is "item" then use .item.sortable-chosen instead!

@douweknook YAY....... thank you , it solved the problem even in pure javaScript tank you

@douweknook You're a gentleman and a scholar. This worked for fixing border radius issue, but it still crops off box shadow. Note: this works properly in Firefox.

I created a separate issue for this, for anyone interested. https://github.com/react-dnd/react-dnd/issues/2762