Custom drag image with HTML in Safari (MacOS)

[sweet-seb]

Hi Cameron and thanx for a nice component!

I'm trying to get it to work with the "Custom drag image with HTML" in Safari on MacOS (latest versions). When I look at your example it dosen't work either. If you could have a look at it, that would be great! It works in Chrome…

//Sebastian

[cameronhimself]

Eurgh, I knew this was going to come up eventually. The root cause is that the native Drag and Drop API demands that the drag image HTML be actually visible on the page. In other words, the visibility of the drag image will exactly match the visibility as it is on the page. As such, the only way to get it to work is to use various hacks to make the the HTML content technically "visible", but "invisible" to a human, but different browsers have different opinions about what exactly "visible" and "invisible" mean in this context. Take a look at this page to see a variety of hacks, and to test them in your target browsers.

Anyhow, my solution to the problem at the time I wrote this library was to use a rudimentary hack that would "work" (as in, actually hide the content in all scenarios), but I knew it wasn't going to be bulletproof as far as correctly displaying the drag HTML in all browsers: I just shoved the HTML off screen with position: fixed. I've seriously thought about removing the hack entirely, and letting end users use whatever hack they want (it only takes a few lines of CSS to reimplement the one I used). This obviously isn't a solution, it just constricts the scope of what this library aims to do. Although since it's not effectively solving that problem, I don't think it would be a great loss.

There only three truly bulletproof ways I know to solve the issue:

1. Use an image instead of HTML. Difficult if you have dynamic content.
2. Allow the drag HTML to be visible as part of the draggable element. Would require a redesign, if it's even possible in a given use case.
3. Stop relying on the browser's native Drag and Drop API and reimplement the drag image HTML functionality from scratch.

As a library author, obviously 3 is the only one I can do, and given this lib's stated goal of being a lightweight wrapper around the native Drag and Drop API, I'm not sure it's a good direction for me to go.

EDIT: clarified some points

[andrewhl]

Could you do browser detection and implement a Safari-specific approach? 😇

[cameronhimself]

I don't have a Mac to test with, but my understanding is that there is no method that works in Safari, aside from completely replacing and reimplementing the drag image HTML functionality. Which, as mentioned above, sort of goes directly against the goals and purpose of this library.

If you visit this page and let me know if any of those methods work in Safari I can see about using browser detection.

[mdunisch]

running into the same issue. all of the examples on the other page are working.

i think the problem ist the positon: fixed in the drag-image mother div

[engram-design]

Can confirm things work as expected by either removing position: fixed, or by setting top:0. What seems to be the issue is that when the image is completely off the viewport (with top: -1000px) Safari just can't handle this. Changing it to top: 0 works, but of course, the image is rendered at the top of the window. Other browsers clearly don't have a problem with this.

Trying to mess around with display: none/block as a workaround?

The example works fine in Safari. For now, I'm just not rendering the slot by browser-detecting Safari, and it'll use its native ghost. So I think this is certainly just a library-specific thing that can be fixed?