Bug 108079 - HTML5 draggable=true elements have white borders while dragging
Summary: HTML5 draggable=true elements have white borders while dragging
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL: http://iancode.info/bugs/drag-padding...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2013-01-28 06:48 PST by Ian Taylor
Modified: 2022-06-11 20:31 PDT (History)
6 users (show)

See Also:


Attachments
A HTML file that showcasing the bug (714 bytes, text/html)
2013-01-29 00:50 PST, Ian Taylor
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Ian Taylor 2013-01-28 06:48:51 PST
When dragging elements with HTML5 draggable=true, you will see white borders on elements that have padded or margined areas inside the drag element with no background color specified.

This occurs in both Safari 6.0.2 (8536.26.17) and Chrome 24.0.1312.56 on Mac OS 10.8.  It does not occur in Firefox 18.

To reproduce:
1. http://iancode.info/bugs/drag-padding-bug.html
2. Drag the pink "Drag Me" element.
3. Notice that it has a white border around it while dragging. <-Bug

Note: I would usually put this in a JSFiddle instead of a self-hosted file, but the same HTML doesn't result in the bug there, likely due to the use of iframes.
Comment 1 Alexey Proskuryakov 2013-01-28 22:19:47 PST
I don't know if this is intentional or not, but it sounds like it can be good for visibility over same-colored areas. Does this cause undesirable effects in practice?

> I would usually put this in a JSFiddle instead of a self-hosted file

The best practice is to attach a test case in Bugzilla (ideally as a self-contained HTML file).
Comment 2 Ian Taylor 2013-01-29 00:50:09 PST
Created attachment 185189 [details]
A HTML file that showcasing the bug

As requested, here's an uploaded file version of the same html page I linked to.
Comment 3 Ian Taylor 2013-01-29 01:05:00 PST
Yes, this does cause undesirable effects in practice... The white border is uncontrollable (I can't turn it off) and other browsers don't have the same behavior.  In my test case here, the bug may not seem that bad, because the padding is even on all sides, but often there will just be padding or margin on one side of an element (sometimes large amounts) and it becomes very distracting.   It's also present if you use border-radius, or box-shadow... there will be white backgrounds behind the rounded corners or underneath shadows, which looks really weird if your site does not use a white background.

I'm trying to build a drag and drop list component using just the HTML 5 drag and drop APIs (instead of mouse events) and this makes it very difficult as if I want the dragging to look consistent across all browsers, I must make certain that I don't use rounded corners, I don't use shadows, and I don't use padding or margin on the dragged elements because all of them will exhibit this bug where the background color of the dragged elements is always white.
Comment 4 Mihai Parparita 2013-04-02 11:21:04 PDT
This was fixed for Chrome with http://trac.webkit.org/changeset/144841
Comment 5 Ahmad Saleem 2022-06-10 16:56:25 PDT
It landed in Webkit and can be verified based on Comment 04 and from Github Webkit mirror as below:

https://github.com/WebKit/WebKit/commit/4417e0173af4d08cf0b2e5a8804cf44e1f6dae5c

Can this be closed as "RESOLVED FIXED"? Thanks!
Comment 6 Radar WebKit Bug Importer 2022-06-11 20:31:14 PDT
<rdar://problem/94905351>