Bug 246734

Summary: Drag preview images for draggable elements are broken when a CSS transform is impacting the draggable element
Product: WebKit Reporter: alexreardon
Component: WebKit Misc.Assignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: megan_gardner, thorton, webkit-bug-importer, wenson_hsieh
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: Unspecified   
OS: macOS 12   
URL: https://codesandbox.io/s/transform-on-draggable-for-safari-bug-zy3czk?file=/src/styles.css:811-881
See Also: https://bugs.webkit.org/show_bug.cgi?id=108078
https://bugs.webkit.org/show_bug.cgi?id=196816
https://bugs.webkit.org/show_bug.cgi?id=22787
https://bugs.webkit.org/show_bug.cgi?id=185161
Attachments:
Description Flags
Screenshot of broken drag preview none

Description alexreardon 2022-10-18 22:44:19 PDT 
Created attachment 463075 [details]
Screenshot of broken drag preview

## Background

When dragging a draggable element (an element with `draggable="true"`) the browser will generate a drag preview (or "drag image") of the draggable element when dragging. The drag preview is a picture of the draggable element.

## Problem

If a CSS transform is applied to the draggable element, or a parent of the draggable element, then the drag preview can be rendered incorrectly

- Standalone demo: https://codesandbox.io/s/transform-on-draggable-for-safari-bug-zy3czk?file=/src/styles.css:811-881
Comment 1 alexreardon 2022-10-18 22:50:03 PDT 
This issue appears to be related to: https://bugs.webkit.org/show_bug.cgi?id=108078

Note: this issue _only_ occurs in Safari. Drag preview generation works as expected in Chrome and Firefox

- ✅ Chrome 106.0.5249.119
- ✅ Firefox 105.0.3
- ❌ Safari 16.0
- ❌ Safari Technology Preview Release 155
Comment 2 Radar WebKit Bug Importer 2022-10-25 22:45:18 PDT 
<rdar://problem/101575886>