Drag image for draggable element is incorrect size when element has child outside of its bounds

• Component: UI Events
• Status: NEW ---

[Darin Senneff]

Created attachment 432799 [details]
Screen capture showing differently-sized drag images

When a drag action is initiated with a draggable element, a drag/ghost image appears as expected. 

In Safari on both iPadOS v14 and iOS v15beta, the drag image appears in the incorrect size and scale if the draggable element has a child that extends beyond its boundaries. That's certainly not expected.

In Safari 14 on MacOS, the drag image appears the correct size, but with some clipping of any child elements that extend beyond the draggable element's boundaries. Not sure if that's expected or not. 

On the demo page linked below, there's three draggable elements with various-sized child elements. When testing on iPadOS v14 or iOS v15, you'll notice the size of the drag images are different depending on if the child element extends beyond the parent's boundaries or not

Demo page: https://codepen.io/dsenneff/pen/cf04b68c626d7bb849986f0bfa870f94

Also attaching a screen capture video as well.

[Radar WebKit Bug Importer]

<rdar://problem/80377780>

[Darin Senneff]

Still present in Safari 16.

I know it’s a whole can of worms to deal with every possible way an element’s drag  image should be sized and cropped based on how it and its children are styled. But there certainly can be some improvements made for some common situations. Like, just having too thick a border (like it element #2 in the video attached) results in an awful drag image. 

Can we at least just have it mirror the original element with anything else cropped out?

[Darin Senneff]

Created attachment 462364 [details]
Safari 16 desktop screen recording

Still an issue on desktop Safari as well, but better than on iOS/iPadOS. 

No issues with Firefox or Chrome (see attachments for those)

[Darin Senneff]

Created attachment 462365 [details]
Chrome screen recording

[Darin Senneff]

Created attachment 462366 [details]
Firefox screen recording

[Darin Senneff]

Just attached some additional screen recordings to show how other browsers handle the drag image. 

- Chrome and Firefox both look great. 
- Safari on desktop isn't great, it clips out a good amount of the overflow, but still better than iOS Safari.
- Safari iOS still oddly crops/resizes/skews the drag image and looks bad. The original attachment showing iOS Safari 14 is the same as it looks today in v16.