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

[nottoseethesun]

This issue does not happen on Firefox and Safari. Perhaps it is a bug related to Chrome or any possible Chrome specific react-dnd code (if there is any), as it only happens there.

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?

[theTechie]

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 ***@***.***> 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 <#788>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA_31sMofYE49RWrSM0SvEiSJEIK9TOBks5sBacZgaJpZM4NxzBj> .

-- Regards, Gagan

[nottoseethesun]

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.

[theTechie]

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 ***@***.***> 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 <#788 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA_31vIjJk8QhGycVd78dYB1EWa_El_nks5sBh3igaJpZM4NxzBj> .

-- Regards, Gagan

[nottoseethesun]

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.

[douweknook]

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.

[densk1]

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

[ariellevitsky]

@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!

[a-m-dev]

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

[danny-andrews]

@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.

[danny-andrews]

I created a separate issue for this, for anyone interested. #2762