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.
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).
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.
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.
This was fixed for Chrome with http://trac.webkit.org/changeset/144841
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!
<rdar://problem/94905351>
https://github.com/WebKit/WebKit/commit/4417e0173af4d08cf0b2e5a8804cf44e1f6dae5c https://slice-masters.io I think it can help you because it helped me succeed.