Bug 266025 – Using setDragImage with html element containing transparency generates incorrect bitmap preview

• Component: New Bugs
• Status: RESOLVED DUPLICATE

[Stephen Thompson]

When using setDragImage and passing it a HTMLElement which has a transparent background. The resulting bitmap preview contains baked in text elements from the underlying page which were not children of the HTMLElement. If the HTMLElement is opaque then the resulting snapshot doesn't contain any text elements from the page.

Our HTMLElement has the following styles set before being passed to setDragImage;
{
  position: 'fixed',
  top: 0,
  left: 0,
  zIndex: 2147483647,
  pointerEvents: 'none',
}

If the web page contains text near the 0,0 coords within the bounds of the HTMLElement Rect, then that text will be included in the snapshot.

This is different behaviour when compared to chrome and firefox. They only take a snapshot of the element, and don't include text from the web page outside the element.

This bug can be worked around by offsetting the container negative left by the container width-0.0001px. If we offset by -width then the drag operation will be cancelled which is why we need to leave a fraction of the container still within the viewport bounds.

Reproduction example: https://codesandbox.io/s/safari-drag-preview-transparency-bug-2k58pt?file=/src/index.ts:775-889

The fix is also in the example, so you can uncomment it to fix the issue in Safari.

```
// Safari fix
const rect = dragPreview.getBoundingClientRect();
dragPreview.style.left = `-${rect.width - 0.0001}px`;
```

Created attachment 468936 [details]
Picture of bug occurring in Safari@17.1

- Safari@17.1 → bug
- Chrome@119 → no bug
- Firefox@120 → no bug

[Radar WebKit Bug Importer]

<rdar://problem/119355410>

[Abrar Rahman Protyasha]

Thanks for the bug report Stephen! This was originally reported in https://bugs.webkit.org/show_bug.cgi?id=237446, so I'll dupe this bug to that.

*** This bug has been marked as a duplicate of bug 237446 ***