<html>
    <head>
      <base href="https://bugs.webkit.org/">
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - Drag image for draggable element is incorrect size when element has child outside of its bounds"
   href="https://bugs.webkit.org/show_bug.cgi?id=227630">227630</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>Drag image for draggable element is incorrect size when element has child outside of its bounds
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari 14
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>iPhone / iPad
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>iOS 14
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>UI Events
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned@lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>darin.senneff@gmail.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>Created <span class=""><a href="attachment.cgi?id=432799" name="attach_432799" title="Screen capture showing differently-sized drag images">attachment 432799</a> <a href="attachment.cgi?id=432799&action=edit" title="Screen capture showing differently-sized drag images">[details]</a></span>
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: <a href="https://codepen.io/dsenneff/pen/cf04b68c626d7bb849986f0bfa870f94">https://codepen.io/dsenneff/pen/cf04b68c626d7bb849986f0bfa870f94</a>

Also attaching a screen capture video as well.</pre>
        </div>
      </p>


      <hr>
      <span>You are receiving this mail because:</span>

      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>