I have a design surface that is allowing drag-drop from a toolbar onto the surface. The first item I drag, drops to the position where I drop it. After that, each subsequent dropped item is somehow 100 (ish) pixels further down the designer than where it is supposed to be.
Both of these were dropped at the very top (different horizontal positions). When I inspect the elements in the browser, they are both showing up at top: 2500px but that is clearly not correct. When I edit the top property in the css, the elements do move, but they are NOT both at 2500px.
Any idea what could be causing this behavior? This is having side effects such as when I click to drag an element, it is dragging from the origin where it was dropped but the actual rectangle is offset by those 100 pixels. Worth noting that each element I drop onto the surface seems to be incremented. First is at 0,0, second would be at 0,100, third would be at 0,200 and so on. I am unable to find where this offset is coming from.
Here is the outerHTML from both elements, if it helps.
<div id="baseActivity_171230" class="wfElement ui-resizable" style="top: 2500px;left: 2607.94px;width: 100px;height: 100px;" domid="baseActivity_171230">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100%" height="100%" preserveAspectRatio="none" class="toolPart">
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100%" height="100%" class="wfElementOuter toolPart" vector-effect="non-scaling-stroke"></rect>
</svg>
</div>
<div id="baseActivity_171231" class="wfElement ui-resizable" style="top: 2500px;left: 2754.94px;width: 100px;height: 100px;" domid="baseActivity_171231">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100%" height="100%" preserveAspectRatio="none" class="toolPart">
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100%" height="100%" class="wfElementOuter toolPart" vector-effect="gon-scaling-stroke"></rect>
</svg>
</div>