Bug 267811 – Dragging of <tr>s that are position: absolute and have a translate applied erroneously uses the image of the first row

• Status: REOPENED
• Component: Layout and Rendering

[Jeroen Zwartepoorte]

Created attachment 469479 [details]
Video of the behavior in Safari 17.2.1

Given a table with `<tr draggable="true" style="translate: 0 0px">` style table rows, dragging the rows is broken in Safari. Try dragging the second row in this codepen: https://codepen.io/jpzwarte/pen/xxBrbNq

Works fine in Chromium and FF, but in WebKit, you're not dragging the "Ipsum" row, but instead WebKit always starts dragging the first "Lorem" row. See the video with the behavior in action.

[Jeroen Zwartepoorte]

Found this code in the Vaadin grid component:

```
        if (this._safari) {
          // Safari doesn't position drag images from transformed
          // elements properly so we need to switch to use top temporarily
          const transform = row.style.transform;
          row.style.top = /translateY\((.*)\)/.exec(transform)[1];
          row.style.transform = 'none';
          requestAnimationFrame(() => {
            row.style.top = '';
            row.style.transform = transform;
          });
        }
```

So it's been known a while.

[Jeroen Zwartepoorte]

There is one more line necessary to fix Safari:

event.dataTransfer!.setDragImage(row, event.clientX - rowRect.left, event.clientY - rowRect.top);

Where event is the DragEvent and rowRect is the bounding client rect of the dragged row.

Without this line, Safari will still animate the dragged row from the top of the <tbody>.

So to summarise: you can fix the Safari behavior by:
1. Temporarily replace translateY with top
2. Explicitly set the drag image

[Radar WebKit Bug Importer]

<rdar://problem/121382647>

[Taher]

Pull request: https://github.com/WebKit/WebKit/pull/46845

[EWS]

Committed 296395@main (860e78e7dd0a): <https://commits.webkit.org/296395@main>

Reviewed commits have been landed. Closing PR #46845 and removing active labels.

[Simon Fraser (smfr)]

This was reverted in https://commits.webkit.org/296985@main