HTML5 draggable=true elements have white borders while dragging

• Component: DOM
• Status: RESOLVED FIXED

[Ian Taylor]

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.

[Alexey Proskuryakov]

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).

[Ian Taylor]

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.

[Ian Taylor]

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.

[Mihai Parparita]

This was fixed for Chrome with http://trac.webkit.org/changeset/144841

[Ahmad Saleem]

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!

[Radar WebKit Bug Importer]

<rdar://problem/94905351>

[MarcusSchreiber]

https://github.com/WebKit/WebKit/commit/4417e0173af4d08cf0b2e5a8804cf44e1f6dae5c https://slice-masters.io
I think it can help you because it helped me succeed.