Bug 246734 - Drag preview images for draggable elements are broken when a CSS transform is impacting the draggable element
Summary: Drag preview images for draggable elements are broken when a CSS transform is...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebKit Misc. (show other bugs)
Version: Safari 16
Hardware: Unspecified macOS 12
: P2 Normal
Assignee: Nobody
URL: https://codesandbox.io/s/transform-on...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-10-18 22:44 PDT by alexreardon
Modified: 2022-10-25 22:45 PDT (History)
4 users (show)

See Also:

Attachments
Screenshot of broken drag preview (67.28 KB, image/png)
2022-10-18 22:44 PDT, alexreardon 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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>