javascript - Why does this CSS style interfere with HTML5 drag and drop? (position: absolute; left: -10000px) -

dojo dijit buttons hide "real" button offscreen using css:

.dijitoffscreen {      position: absolute !important;     left: -10000px !important;     top: -10000px !important; }     

• why cause html5 drag , drop not function correctly in chrome , firefox?
• what alternative methods hide input element , maintain same dojo dijit button behavior? (adding display:none offscreen input element seems work, functionally alter behavior of input , widget?)

---

original question:

sometimes default 'ghost' html5 drag image smaller in size or not rendered @ all. varies browser , there seems interaction dojo dijits involved.

after adding dijit button draggable dijit contentpane, causes drag icon tiny in firefox , not rendered @ in chrome?

simple jsfiddle repro:

var cp1 = new contentpane({     style: "width: 400px; height: 124px; background:red",     content: "cp1: 'ghost 'drag icon tiny or not visible :(<br />", });  // make draggable domprop.set(cp1.domnode, 'draggable', 'true'); cp1.on('dragstart', ondragstarthandler); // otherwise ff doesn't show drag icon  // problem -> adding button messes drag icon button = new button({label: 'dijit button'}); button.placeat(cp1.containernode); 

update:

• in addition rendering drag icon incorrectly, other html5 drag , drop events no longer function correctly. on chrome, entire document disappears after dragover and/or end events added. on firefox, processing of drag events slower.
• adding generic html button inputs instead of dijit buttons not result in of these side effects: dojo dijit interfering somehow...

update 2:

• root cause: dijit button hides html button input element via dijitoffscreen class. removing left: 10000px !important , top: 10000px !important styles element restores drag , drop @ expense of showing blank button. credit: kenneth g. franqueiro

according the spec, can use "setdragimage" specify image element use on drag, this:

      // first, create draggable contentpane weird drag icon       var cp1 = new contentpane({         style: "width: 400px; height: 124px; background:red",         content: "cp1: 'ghost 'drag icon full-sized , visible :)<br />",       });       var img = document.getelementbyid("drag-image");       ondragstarthandler1 = function (ev) {         console.log(ev);         console.log('dragstart:', ev.target.id);         ev.datatransfer.setdata("text", ev.target.id);         // define "ghost" image here, proper offset         ev.datatransfer.setdragimage(img, ev.x, ev.y);       }       // problem -> adding button messes drag icon       button = new button({         label: 'dijit button'       });       button.placeat(cp1.containernode);        // make draggable       domprop.set(cp1.domnode, 'draggable', 'true');       cp1.on('dragstart', ondragstarthandler1); // otherwise ff doesn't show drag icon        // add document       cp1.placeat(document.body);       cp1.startup(); 

here's your fiddle, fixed.

edit:

i guess shouldn't 'fixed', more work-arounded... odd doesn't display element during drag default, but, said, maybe it's weird dojo-related thing. regardless, seems "setdragimage" there unambiguously define user feedback in such cases...